Skip to content

Commit 4b46604

Browse files
anti-podeanti-pode
committed
feat(components): add some styles
1 parent 744865a commit 4b46604

File tree

21 files changed

+737
-530
lines changed

21 files changed

+737
-530
lines changed

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,5 @@
3636
"vite": "^7.0.0",
3737
"vite-plugin-vue-devtools": "^7.7.7",
3838
"vue-tsc": "^2.2.10"
39-
},
40-
"packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
39+
}
4140
}

‎src/app.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,21 @@ import { ERoutes } from '@/router/routes.ts'
4444
@use '@/assets/styles/breakpoints' as *;
4545
4646
.main {
47-
@include container;
48-
4947
display: flex;
5048
align-items: flex-start;
5149
overflow: hidden;
5250
gap: 20px;
53-
margin-top: 20px;
51+
margin-top: 20px !important;
52+
53+
@include container;
5454
5555
@include tablet {
5656
gap: 10px;
5757
}
58+
59+
@include mobile {
60+
margin-top: 0 !important;
61+
}
5862
}
5963
6064
.sidebar {
@@ -104,11 +108,11 @@ import { ERoutes } from '@/router/routes.ts'
104108
overflow: auto;
105109
max-height: calc(100dvh - 20px);
106110
background: $app-card-background;
107-
padding: 20px;
108-
padding-bottom: 60px;
111+
padding: 20px 20px 60px 20px;
109112
110113
@include mobile {
111114
max-height: 100dvh;
115+
padding: 10px 10px 40px 10px;
112116
}
113117
}
114118
</style>

‎src/assets/styles/_breakpoints.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
$desktop: 1380px; // from
22
$tablet: 1023px;
33
$mobile: 767px;
4-
$mobile-sm: 376px;
4+
$mobile-sm: 410px;
55

66
$from_tablet: #{$tablet + 1px};
77
$from_mobile: #{$mobile + 1px};

‎src/assets/styles/_container.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
}
1717

1818
.container {
19-
@include container;
20-
2119
display: flex;
2220
align-items: flex-start;
2321
flex-direction: column;
22+
23+
@include container;
2424
}

‎src/components/section/app-section.vue‎

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,6 @@ const props = defineProps({
3232
</section>
3333

3434
<section class="section__body">
35-
<div class="section__body__examples">
36-
<div v-if="$slots.example1" class="section__body__example">
37-
<h3 class="section__body__example__title">Пример #1</h3>
38-
39-
<slot name="example1" />
40-
</div>
41-
42-
<div v-if="$slots.example2" class="section__body__example">
43-
<h3 class="section__body__example__title">Пример #2</h3>
44-
45-
<slot name="example2" />
46-
</div>
47-
</div>
48-
4935
<div v-if="$slots.pros" class="section__body__pros">
5036
<h3 class="section__body__pros__title">Когда использовать?</h3>
5137

@@ -62,6 +48,20 @@ const props = defineProps({
6248
</div>
6349
</div>
6450

51+
<div class="section__body__examples">
52+
<div v-if="$slots.example1" class="section__body__example">
53+
<h3 class="section__body__example__title">Пример #1</h3>
54+
55+
<slot name="example1" />
56+
</div>
57+
58+
<div v-if="$slots.example2" class="section__body__example">
59+
<h3 class="section__body__example__title">Пример #2</h3>
60+
61+
<slot name="example2" />
62+
</div>
63+
</div>
64+
6565
<slot></slot>
6666
</section>
6767
</section>
@@ -81,11 +81,11 @@ const props = defineProps({
8181
display: flex;
8282
flex-direction: column;
8383
align-items: flex-start;
84-
gap: 16px;
84+
gap: 32px;
8585
margin-bottom: 20px;
8686
8787
@include tablet {
88-
gap: 8px;
88+
gap: 16px;
8989
}
9090
9191
&__breadcrumbs {
@@ -121,22 +121,31 @@ const props = defineProps({
121121
&__description {
122122
width: 100%;
123123
color: $color-black-text;
124-
background-color: $app-background;
125-
border-left: 4px solid $app-accent;
126124
padding: 10px;
125+
border: 2px solid $app-background;
126+
127+
> :first-child {
128+
margin-top: 0 !important;
129+
}
130+
131+
> :last-child {
132+
margin-bottom: 0 !important;
133+
}
127134
}
128135
}
129136
130137
&__body {
131138
&__examples {
139+
margin-top: 40px;
140+
132141
h3 {
133142
font-style: italic;
134143
}
135144
}
136145
137146
&__example {
138147
& + & {
139-
margin-top: 30px;
148+
margin-top: 40px;
140149
}
141150
142151
&__title {
@@ -168,6 +177,16 @@ const props = defineProps({
168177
&__title {
169178
margin: 0 0 6px !important;
170179
}
180+
181+
&__text {
182+
> :first-child {
183+
margin-top: 0 !important;
184+
}
185+
186+
> :last-child {
187+
margin-bottom: 0 !important;
188+
}
189+
}
171190
}
172191
173192
> :first-child {
@@ -179,7 +198,7 @@ const props = defineProps({
179198
}
180199
181200
> * {
182-
margin-bottom: 40px;
201+
margin-bottom: 20px;
183202
}
184203
185204
h2,

‎src/structures/graph/view-graph.vue‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
<template>
22
<app-section title="Граф">
33
<template #description>
4-
Граф — это структура данных, состоящая из узлов и рёбер, где каждый узел представляет объект, а рёбра — связи между этими объектами. В frontend-разработке графы могут быть использованы для представления социальных сетей, где узлы — это люди, а рёбра — их дружеские связи.
4+
Граф — это структура данных, состоящая из узлов и рёбер, где каждый узел представляет объект,
5+
а рёбра — связи между этими объектами. В frontend-разработке графы могут быть использованы для
6+
представления социальных сетей, где узлы — это люди, а рёбра — их дружеские связи.
7+
</template>
8+
<template #pros> Когда нужна визуализация данных </template>
9+
<template #cons>
10+
Одной из основных проблем графов является сложность алгоритмов обхода и поиска, особенно в
11+
больших и плотно связанных графах. Это может привести к значительному увеличению времени
12+
выполнения операций.
13+
<br />
14+
<b>Ключевые слова:</b> алгоритмы поиска в графах, обход графов, алгоритм Дейкстры.
515
</template>
616
<template #example1>
717
<p>
8-
Социальная сеть, где пользователи могут добавлять друзей. Граф может быть использован для представления этих связей, показывая, кто с кем дружит.
18+
Социальная сеть, где пользователи могут добавлять друзей. Граф может быть использован для
19+
представления этих связей, показывая, кто с кем дружит.
920
</p>
1021
<friend-graph-d3 />
1122
</template>
12-
<template #pros>
13-
Когда нужна визуализация данных
14-
</template>
15-
<template #cons>
16-
Одной из основных проблем графов является сложность алгоритмов обхода и поиска, особенно в больших и плотно связанных графах. Это может привести к значительному увеличению времени выполнения операций.
17-
<br />
18-
<b>Ключевые слова:</b> алгоритмы поиска в графах, обход графов, алгоритм Дейкстры.
19-
</template>
2023
</app-section>
2124
</template>
2225

2326
<script setup lang="ts">
2427
import AppSection from '@/components/section/app-section.vue'
25-
import FriendGraphD3 from '@/structures/graph/examples/friend-graph-d3.vue'
28+
import FriendGraphD3 from './examples/friend-graph-d3.vue'
2629
</script>

0 commit comments

Comments
 (0)