Skip to content

Commit c4dc7fb

Browse files
SpirikSpirik
committed
Proposals Viewer block
1 parent a6fa148 commit c4dc7fb

File tree

14 files changed

+1739
-0
lines changed

14 files changed

+1739
-0
lines changed

‎_data/page_proposals.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,37 @@
77
"url": "https://github.com/cpp-ru/ideas/issues/new?template=idea_or_fix.md",
88
"text": "Поделиться идеей"
99
}
10+
},
11+
"viewer": {
12+
"heading": "Идеи других пользователей",
13+
"filterToggleLabel": "Фильтр",
14+
"filter": [
15+
{
16+
"label": "Открытые",
17+
"value": "&state=open&labels="
18+
},
19+
{
20+
"label": "Решённые",
21+
"value": "&state=closed"
22+
},
23+
{
24+
"label": "Решённые в РГ21",
25+
"value": "&state=closed&labels=Сделано%20в%20РГ21"
26+
},
27+
{
28+
"label": "В работе",
29+
"value": "&state=open&labels=В%20работе",
30+
"checked": true
31+
},
32+
{
33+
"label": "На паузе",
34+
"value": "&state=open&labels=На%20паузе"
35+
},
36+
{
37+
"label": "Вce",
38+
"value": "&state=all"
39+
}
40+
]
1041
}
1142
}
1243
}

‎_includes/proposals-viewer.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{% assign fields = site.data.page_proposals.fields.viewer %}
2+
<script type="application/javascript" src="{{'/assets/js/proposals.js' | append: '?v=' | append: site.time | relative_url}}"></script>
3+
<div class="proposals-viewer">
4+
<div class="proposals-viewer__container container">
5+
<h2 class="proposals-viewer__heading heading-h2">
6+
{{ fields.heading | markdownify | remove: '<p>' | remove: '</p>' }}
7+
</h2>
8+
9+
<div class="proposals-viewer__filter-wrap">
10+
11+
<input class="proposals-viewer__filter-active-checkbox" type="checkbox" id="stateCheckbox" />
12+
<div class="proposals-viewer__filter-active">
13+
<label class="proposals-viewer__filter-active-label" for="stateCheckbox">
14+
<span class="proposals-viewer__filter-active-button">{{ filterToggleLabel }}</span>
15+
</label>
16+
</div>
17+
18+
<div class="proposals-viewer__filter">
19+
{% for item in fields.filter %}
20+
<div class="proposals-viewer__filter-item">
21+
<label class="proposals-viewer__filter-label">
22+
<input class="proposals-viewer__filter-radio" type="radio" name="stateRadios" value="{{ item.value }}" onclick="proposalsFilter();" {% if item.checked == true %}checked{% endif %} />
23+
<span class="proposals-viewer__filter-button">{{ item.label | markdownify | remove: '<p>' | remove: '</p>' }}</span>
24+
</label>
25+
</div>
26+
{% endfor %}
27+
</div>
28+
</div>
29+
30+
</div>
31+
32+
<div class="proposals-viewer__inset">
33+
<div class="proposals-viewer__container container">
34+
<div class="proposals-viewer__content" id='proposalsContent'>
35+
</div>
36+
</div>
37+
</div>
38+
</div>

‎_layouts/default.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1111
{% endif %}
1212
<link rel="stylesheet" href="{{'/assets/css/styles.css' | append: '?v=' | append: site.time | relative_url}}">
13+
<script type="application/javascript" src="{{'/vendors/jquery-3.6.0.min.js' | relative_url}}"></script>
14+
<script type="application/javascript" src="{{'/vendors/showdown.min.js' | relative_url}}"></script>
15+
<link rel="stylesheet" href="{{'/vendors/highlight/github.min.css' | relative_url}}">
16+
<script type="application/javascript" src="{{'/vendors/highlight/highlight.min.js' | relative_url}}"></script>
1317
</head>
1418
<body>
1519
{% include svg-defs.html %}

‎_sass/blocks/_proposals-viewer.scss‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
.proposals-viewer__heading {
2+
max-width: 600px;
3+
4+
/* @include breakpoint-lo($small-viewport) {
5+
max-width: 130px;
6+
} */
7+
}
8+
9+
.proposals-viewer__inset {
10+
margin: 30px auto 0;
11+
padding: 50px 0;
12+
background: #fff;
13+
border-radius: 50px 50px 0 0;
14+
15+
@include breakpoint-lo($small-viewport) {
16+
padding: 40px 0 10px;
17+
border-radius: 20px 20px 0 0;
18+
}
19+
}
20+
21+
/* Filter */
22+
23+
.proposals-viewer__filter-wrap {
24+
margin: 0 0 -80px;
25+
26+
@include breakpoint-lo($small-viewport) {
27+
margin: 0;
28+
}
29+
}
30+
31+
.proposals-viewer__filter {
32+
display: flex;
33+
flex-flow: row nowrap;
34+
align-items: stretch;
35+
justify-content: space-between;
36+
margin: -5px -10px;
37+
38+
@include breakpoint-lo($small-viewport) {
39+
display: none;
40+
flex-wrap: wrap;
41+
margin: -30px 20px 0;
42+
padding: 30px 20px 0;
43+
background: #fff;
44+
border: solid 2px $color-text;
45+
border-radius: 10px;
46+
47+
.proposals-viewer__filter-active-checkbox:checked + .proposals-viewer__filter-active + & {
48+
display: block;
49+
}
50+
}
51+
}
52+
53+
.proposals-viewer__filter-item {
54+
flex-grow: 1;
55+
flex-shrink: 1;
56+
margin: 5px;
57+
58+
@include breakpoint-lo($small-viewport) {
59+
flex-shrink: 0;
60+
width: 100%;
61+
margin: 0 0 -1px;
62+
border-bottom: solid 1px $color-text;
63+
64+
&_active {
65+
display: none;
66+
}
67+
}
68+
}
69+
70+
.proposals-viewer__filter-label {
71+
position: relative;
72+
display: block;
73+
height: 100%;
74+
}
75+
76+
.proposals-viewer__filter-radio {
77+
position: absolute;
78+
top: 0;
79+
left: -1000em;
80+
}
81+
82+
.proposals-viewer__filter-button {
83+
position: relative;
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
box-sizing: border-box;
88+
width: 100%;
89+
max-width: none;
90+
height: 100%;
91+
min-height: 62px;
92+
padding: 21px 20px;
93+
color: $color-text;
94+
font: 400 16px/1 $font-family-text;
95+
text-align: center;
96+
text-decoration: none;
97+
text-transform: uppercase;
98+
background: #fff;
99+
border: solid 2px $color-text;
100+
border-radius: 10px;
101+
cursor: pointer;
102+
transition: color 0.3s, background 0.3s, opacity 0.3s, border-color 0.3s;
103+
appearance: none;
104+
105+
@include breakpoint-lo($small-viewport) {
106+
min-height: 0;
107+
padding: 12px 15px;
108+
background: transparent;
109+
border: none;
110+
}
111+
112+
&[disabled] {
113+
opacity: 0.6;
114+
pointer-events: none;
115+
}
116+
117+
&:hover,
118+
&:focus,
119+
.proposals-viewer__filter-radio:focus + &,
120+
.proposals-viewer__filter-radio:checked + & {
121+
color: #fff;
122+
background: $color-brand-blue;
123+
border-color: $color-brand-blue;
124+
outline: none;
125+
126+
@include breakpoint-lo($small-viewport) {
127+
color: $color-brand-blue;
128+
background: transparent;
129+
}
130+
}
131+
}
132+
133+
/* Filter Toggle */
134+
135+
.proposals-viewer__filter-active {
136+
display: none;
137+
138+
@include breakpoint-lo($small-viewport) {
139+
display: block;
140+
}
141+
}
142+
143+
.proposals-viewer__filter-active-label {
144+
position: relative;
145+
display: block;
146+
height: 100%;
147+
}
148+
149+
.proposals-viewer__filter-active-checkbox {
150+
position: absolute;
151+
top: 0;
152+
left: -1000em;
153+
}
154+
155+
.proposals-viewer__filter-active-button {
156+
position: relative;
157+
display: block;
158+
box-sizing: border-box;
159+
width: 100%;
160+
max-width: none;
161+
min-height: 62px;
162+
padding: 21px 52px;
163+
color: #fff;
164+
font: 400 16px/1 $font-family-text;
165+
text-align: center;
166+
text-decoration: none;
167+
text-transform: uppercase;
168+
background: $color-brand-blue;
169+
border: solid 2px $color-brand-blue;
170+
border-radius: $height-button;
171+
cursor: pointer;
172+
transition: color 0.3s, background 0.3s, opacity 0.3s, border-color 0.3s;
173+
appearance: none;
174+
175+
&::after {
176+
content: '';
177+
position: absolute;
178+
top: 50%;
179+
right: 25px;
180+
width: 0;
181+
height: 0;
182+
margin-top: -7px;
183+
border-style: solid;
184+
border-color: #fff transparent transparent;
185+
border-width: 14px 8px 0;
186+
transform: rotate(0);
187+
transition: transform 0.3s;
188+
189+
.proposals-viewer__filter-active-checkbox:checked + .proposals-viewer__filter-active & {
190+
transform: rotate(180deg);
191+
}
192+
}
193+
}
194+
195+
/* Content */
196+
197+
.proposals-viewer__content {
198+
margin: 20px 0 0;
199+
opacity: 1;
200+
transition: opacity 0.3s;
201+
202+
&_loading {
203+
opacity: 0.5;
204+
}
205+
206+
@include breakpoint-lo($small-viewport) {
207+
margin: 0;
208+
}
209+
}
210+
211+
.proposals-viewer__idea {
212+
padding: 25px 0;
213+
font-size: 18px;
214+
border-bottom: solid 2px $color-text;
215+
216+
&:last-child {
217+
border: none;
218+
}
219+
220+
.hljs {
221+
font-size: 16px;
222+
223+
@include breakpoint-lo($small-viewport) {
224+
font-size: 14px;
225+
}
226+
}
227+
228+
@include breakpoint-lo($small-viewport) {
229+
padding: 20px 0;
230+
font-size: 14px;
231+
}
232+
}
233+
234+
.proposals-viewer__idea-title {
235+
margin: 0 0 10px;
236+
padding: 0;
237+
font: 400 42px/1.16 $font-family-heading;
238+
239+
@include breakpoint-lo($small-viewport) {
240+
font-size: 24px;
241+
}
242+
}

‎_sass/common/_scaffolding.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,7 @@ input::-ms-clear {
7373
display: none;
7474
}
7575

76+
.hljs {
77+
background: $color-gray-light-2 !important;
78+
border-radius: 6px;
79+
}

‎_sass/common/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ $color-text-accent: $color-brand-blue;
1010
$color-bg-body: #efefef;
1111
$color-gray: #ccc;
1212
$color-gray-light: #efefef;
13+
$color-gray-light-2: #f6f8fa;
1314
$color-link: $color-brand-blue;
1415
$color-link-hover: #4da8ff;
1516

‎assets/css/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ $label: "{{ site.title }}";
3939
@import "blocks/instruction-examples";
4040

4141
@import "blocks/proposals-hero";
42+
@import "blocks/proposals-viewer";
4243

4344
@import "blocks/news-hero";
4445
@import "blocks/news-achievements";

‎assets/js/.gitkeep‎

Whitespace-only changes.

0 commit comments

Comments
 (0)