Мобильная версия(Для не- Знающие, почему это может быть полезно, подумайте о гаджете «Ганта». Существует буквально гаджет, который вы можете добавить на свою личную панель управления, чтобы брать все свои задачи из базы данных и помещать их в формат Ганта или счетчик задач; ; диаграмма расходов на спринт и т. д.)
Я боролся несколько дней и почти сдался, поэтому хочу попросить вас о помощи.HTML:
- очень просто, это всего лишь список и ползунок; в основном люди заходят на страницу, нажимают кнопку «плюс», выскакивает слайдер со списком элементов (гаджетов; люди должны иметь возможность нажать на них, чтобы вставить гаджет)
- очень просто, немного форматирования слайдера.
- тоже просто, просто играюсь с ползунком
Код: Выделить всё
import {
Component,
OnDestroy
} from '@angular/core';
import {
Subscription
} from 'rxjs';
import {
SliderStateService
} from './slider-state.service'; // Update path accordingly
import {
CommonModule
} from '@angular/common';
import {
ComponentFactoryResolver,
ViewContainerRef,
ViewChild
} from '@angular/core';
/* Gadgets */
import {
ReadingNowTrackerComponent
} from './gadgets/ReadingNow Tracker/ReadingNowTracker.component'; // Make sure the path is correct
/* Gadgets */
@Component({
selector: 'app-dashboard-1',
templateUrl: './dashboard-1.component.html',
styleUrls: ['./dashboard-1.component.scss'],
standalone: true,
imports: [CommonModule]
})
export class Dashboard1Component implements OnDestroy {
sliderOpen = false;
enlargedSlider = false;
private subscription: Subscription;
@ViewChild('dynamicInsert', {
read: ViewContainerRef
}) dynamicInsert: ViewContainerRef;
constructor(
private sliderStateService: SliderStateService,
private componentFactoryResolver: ComponentFactoryResolver) {
// Subscribe to the enlargedSlider$ observable
this.subscription = this.sliderStateService.enlargedSlider$.subscribe(enlarged => {
this.enlargedSlider = enlarged;
// Adjust slider position when enlarging
if (enlarged) {
this.adjustSliderPosition();
} else {
this.resetSliderPosition();
}
});
}
ngOnInit(): void {}
ngOnDestroy(): void {
// Unsubscribe from the subscription to prevent memory leaks
this.subscription.unsubscribe();
}
toggleSlider() {
this.sliderOpen = !this.sliderOpen;
}
toggleEnlargedSlider() {
// Toggle the enlarged state through the service
this.sliderStateService.toggleEnlargedSlider();
}
private adjustSliderPosition() {
document.querySelector('.slider').setAttribute('style', 'left: 0; right: 0;');
}
private resetSliderPosition() {
document.querySelector('.slider').removeAttribute('style');
}
}Код: Выделить всё
.container {
position: fixed;
min-height: 100vh;
bottom: 0;
left: 0;
width: 100%;
z-index: 5;
/* Below the slider to allow the slider to overlay */
display: flex;
flex-direction: column;
/* Stack children vertically */
justify-content: space-between;
/* Adjust based on your layout needs */
}
.slider {
position: fixed;
bottom: 0;
left: 6.5%;
/* Offset from the left */
right: 0%;
/* Offset from the right */
height: 20vh;
/* 20% of the viewport height */
background-color: #e1b035e7;
/* A professional bluish color */
transition: transform 0.3s ease-in-out, left 0.5s ease-in-out, right 0.5s ease-in-out;
/* Combined transitions */
transform: translateY(100%);
/* Initially hidden */
z-index: 6;
/* Above the container to overlay the button when open */
overflow-x: auto;
/* Enable horizontal scrolling */
overflow-y: hidden;
/* Prevent vertical scrolling */
white-space: nowrap;
/* Keep the slider items in one line */
padding: 10px 0;
/* Padding at the top and bottom for aesthetics */
box-sizing: border-box;
/* Include padding in the height calculation */
}
.slider-open {
transform: translateY(0);
/* Move the slider up to show it */
}
.toggle-btn {
position: fixed;
/* Adjusted from 'relative' to 'fixed' to maintain your original design */
bottom: 4px;
/* Adjust the bottom position for initial state */
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #d16b0bc4;
/* Matching blue color for consistency */
color: white;
font-size: 24px;
line-height: 50px;
/* Center the plus sign */
text-align: center;
border: none;
cursor: pointer;
z-index: 7;
/* Above the slider to not be overlapped */
transition: bottom 0.3s ease-in-out, left 0.3s ease;
/* Added left transition here */
overflow: hidden;
/* Hide the parts of the pseudo-element that overflow the button */
/* Pseudo-element for hover effect */
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
/* Start from the left, outside the button */
width: 100%;
height: 100%;
background-color: #4CAF50;
/* The color of the slide-in effect */
transition: left 0.3s ease;
/* Smooth transition for the slide-in effect */
z-index: -1;
/* Place the pseudo-element below the button text */
}
&:hover::before {
left: 0;
/* On hover, slide in the background from left to right */
}
}
.slider-open~.toggle-btn {
bottom: calc(20vh + 4px);
/* Move button above the slider */
}
.slider-list {
display: flex;
/* Align items horizontally */
padding-left: 10px;
/* Adjusts padding for the inner content */
padding-right: 0px;
/* Adjusts padding for the inner content */
margin: 0;
/* Removes default margin */
list-style-type: none;
/* Removes default list styling */
flex-wrap: nowrap;
/* Prevents items from wrapping to a new line */
overflow-x: auto;
/* Enable horizontal scrolling */
}
.slider-item {
display: flex;
/* Keep items in a horizontal line */
align-items: center;
/* Align items vertically in the center */
margin-right: 10px;
/* Space between each item */
border: 4px solid black;
/* Border styling */
padding: 5px;
/* Padding inside each item */
border-radius: 10px;
/* Rounded corners */
background: rgba(253, 196, 111, 0.982);
/* Background color */
box-sizing: border-box;
/* Include padding and border in the element's size */
flex-shrink: 0;
/* Prevent shrinking */
width: 350px;
/* Fixed width for each slider item */
height: calc(20vh - 20px);
/* Fixed height based on the slider height, adjusting for padding */
position: relative;
overflow: hidden;
cursor: pointer;
}
.slider-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #4CAF50;
/* Adjust the color as needed */
transition: left 0.3s ease;
z-index: 0;
}
.slider-item:hover::before {
left: 0;
}
.slider-item * {
position: relative;
z-index: 1;
}
.slider-item:hover {
transition: transform 0.2s ease-in-out;
}
.slider-image {
width: 100px;
/* Fixed width for all images */
height: 100px;
/* Fixed height for all images */
object-fit: cover;
/* Cover the area, image may be cropped */
}
.slider-content {
display: flex;
flex-direction: column;
/* Stack title and description vertically */
justify-content: center;
/* Centers the text content vertically */
overflow: hidden;
/* Hide overflowed text */
margin-left: 10px;
/* Space between image and text content */
width: calc(250px - 10px);
/* Adjusted width for text content, considering padding */
}
.slider-title {
font-weight: bold;
/* Make the title text bold */
font-size: 1em;
/* Slightly larger font size for the title */
overflow: hidden;
/* Hide overflowed title text */
text-overflow: ellipsis;
/* Add an ellipsis for overflowed text */
white-space: wrap;
/* Prevent text wrapping to keep title in a single line */
}
.slider-description {
font-size: 0.8em;
/* Smaller font size for the description */
overflow: hidden;
/* Hide overflowed description text */
text-overflow: ellipsis;
/* Add an ellipsis for overflowed text */
white-space: wrap;
/* Prevent text wrapping to keep description in a single line */
}Код: Выделить всё
[list]
[*]
[img]../../../../../assets/img/clients/4.jpg[/img]
NowReading Tracker
Shows your current book and progress, keeping your reading journey clearly in view.
[*]
[img]../../../../../assets/img/clients/4.jpg[/img]
Deadline Dash
Highlights your most urgent task, ensuring top priorities are never overlooked.
[*]
[img]../../../../../assets/img/clients/4.jpg[/img]
Note Nudge
Brings your key notes to the forefront, making important information readily accessible.
[*]
[img]../../../../../assets/img/clients/4.jpg[/img]
Budget Beacon
Displays current budget status and upcoming expenses, guiding your financial decisions.
[*]
[img]../../../../../assets/img/clients/4.jpg[/img]
Invest Insight
Provides a snapshot of investment trends and metrics, simplifying financial oversight.
[*]
[img]../../../../../assets/img/clients/4.jpg[/img]
QuickPath Picker
Instantly select the best route, optimizing your journey with a tap.
[/list]
+
Я пытаюсь достичь следующего:
Как и в случае с гаджетами Jira, я хочу вставить гаджеты в экран.
Скажем, экран представляет собой матрицу 10x10, поэтому я хочу, чтобы при нажатии одного элемента, например элемент книги из ползунка, чтобы вставить компонент в первое пустое место матрицы. Кроме того, оттуда я смогу изменить его размер (например, с 1x1 до 2x1), перемещать и удалять.
Вот почему у меня есть это:
"import { ReadingNowTrackerComponent } из './gadgets/ReadingNow Tracker/ReadingNowTracker.comComponent';"; Я пытался поместить этот компонент в «матрицу», и иногда он переполнялся, иногда вообще не помещался, сталкивался со многими проблемами.
Пожалуйста, помогите мне, взяв мой код и помог мне получить желаемый результат.
Спасибо!
Подробнее здесь: https://stackoverflow.com/questions/782 ... ating-jira
