Skip to content

Commit 70bdcc8

Browse files
linn-jagestedtlinn-jagestedt
committed
fixa css
1 parent 2fd77ba commit 70bdcc8

File tree

9 files changed

+64
-136
lines changed

9 files changed

+64
-136
lines changed

‎_includes/partials/förmåner.liquid‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
<section class="aside">
2-
3-
{% include "partials/progressBar.liquid" %}
4-
52
<ul>
63
<li>
74
<h1>Förmåner</h1>

‎_pages/förköp.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ <h2>Förköpsformulär</h2>
4646
<br>
4747
<input id="submit-form" type="submit" disabled="disabled" value="Skicka">
4848
</form>
49-
<img id="swish-QR" src="img/swish-QR.png">
5049
</section>
50+
<img id="swish-QR" src="img/swish-QR.png">
5151
{% include "partials/förmåner.liquid" %}
5252
</div>
5353

@@ -93,14 +93,12 @@ <h2>Förköpsformulär</h2>
9393
}
9494
})
9595

96-
const swish = document.querySelector('#formulär img');
96+
const swish = document.querySelector('#swish-QR');
9797
const formulär = document.querySelector('#formulär');
98-
const container = document.querySelector('#container');
9998

10099
form.style.opacity = 0;
101100
swish.style.opacity = 1;
102-
formulär.style.top = "-650px";
103-
formulär.style.overflowY = "visible";
104-
container.classList.add("no-overflow");
101+
formulär.style.display = "none";
102+
swish.style.display = "block";
105103
});
106104
</script>

‎_site/css/förköp.css‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,34 @@
11

2-
.no-overflow {
3-
overflow-y: hidden;
4-
}
5-
6-
@media(max-width: 900px) {
7-
.no-overflow {
8-
overflow-y: visible;
9-
}
10-
}
11-
122
#formulär {
133
max-width: 500px;
144
margin: 0 auto;
155
padding: 40px;
166
flex-direction: column;
177
display: flex;
188
position: relative;
19-
top: 0;
20-
transition: top 1s;
21-
height: calc(100vh - 60px - 80px);
229
min-height: calc(100vh - 60px - 80px);
2310
width: calc(100vw - 500px - 80px);
24-
overflow-y: hidden;
11+
justify-content: center;
2512
}
2613

2714
@media(max-width: 1000px) {
2815
#formulär {
29-
width: calc(100% - 80px);
30-
max-width: 500px;
16+
width: calc(100% - 40px);
17+
padding: 20px 20px 40px 20px;
18+
min-height: calc(100vh - 60px);
3119
margin: 0 auto;
3220
}
3321
}
3422

3523
#swish-QR {
3624
margin: auto;
37-
padding: 20px;
38-
height: 550px;
25+
padding: 80px 40px;
26+
width: calc(100% - 80px);
27+
max-width: 500px;
28+
height: fit-content;
3929
opacity: 0;
4030
transition: opacity 1s;
31+
display: none;
4132
z-index: -1;
4233
}
4334

‎_site/css/index.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,13 @@
6161
display: flex;
6262
margin: 0 auto;
6363
padding: 30px 40px;
64+
gap: 80px;
6465
}
6566

6667
@media(max-width: 1700px) {
6768
.content-box {
6869
flex-direction: column;
70+
gap: 0px;
6971
}
7072
}
7173

‎_site/css/site.css‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ body {
7171

7272
.horizontal-flex {
7373
padding: 60px 0 0 0;
74-
width: calc(100vw - 40vh - 11vh);
74+
width: calc(100vw - 480px);
7575
display: flex;
7676
flex-direction: row;
7777
height: calc(100vh - 60px);
@@ -95,51 +95,54 @@ body {
9595
position: fixed;
9696
display: flex;
9797
flex-direction: column;
98+
justify-content: centered;
9899
right: 0;
99-
padding: 4vh 5.5vh;
100+
padding: 40px 50px;
100101
background: var(--blue);
101102
color: var(--off-yellow);
102-
width: 40vh;
103-
height: calc(100vh - 60px - 8vh);
103+
width: 380px;
104+
height: calc(100vh - 60px - 80px);
104105
}
105106

106107
.aside h1 {
107-
font-size: 6vh;
108+
font-size: 56px;
108109
margin: 0;
109110
font-family: Canterbury;
110111
}
111112

112113
.aside h3 {
113-
font-size: 3vh;
114+
font-size: 28px;
114115
margin: 0 auto;
115116
width: 80%;
116-
padding: 0 0 2vh 0;
117+
padding: 0 0 19px 0;
117118
box-shadow: 0 -3px 0 0 var(--off-yellow) inset;
118119
font-weight: bolder;
119120
font-family: Canterbury;
120121
}
121122

122123
.aside p {
123-
font-size: 2vh;
124-
margin: 1.8vh 0 0 0;
124+
font-size: 17px;
125+
margin: 17px 0 0 0;
125126
font-weight: bold;
126127
}
127128

128-
.aside .small {
129-
font-size: 1.7vh;
130-
}
131-
132129
.aside ul {
133130
padding: 0 0 0 0;
134131
margin: 0;
135132
list-style: none;
136133
display: flex;
137134
flex-direction: column;
138-
justify-content: space-between;
135+
justify-content: space-around;
139136
flex-grow: 4; /* default 0 */
140137
text-align: center;
141138
}
142139

140+
.aside li {
141+
white-space: nowrap;
142+
max-width: fit-content;
143+
margin: 8px auto;
144+
}
145+
143146
@media(max-width: 1000px) {
144147
.aside {
145148
position: relative;
@@ -157,7 +160,6 @@ body {
157160

158161
.aside h3 {
159162
font-size: 26px;
160-
width: 200px;
161163
padding: 0 0 20px 0;
162164
}
163165

‎_site/förköp.html‎

Lines changed: 4 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -99,64 +99,9 @@ <h2>Förköpsformulär</h2>
9999
<br>
100100
<input id="submit-form" type="submit" disabled="disabled" value="Skicka">
101101
</form>
102-
<img id="swish-QR" src="img/swish-QR.png">
103102
</section>
103+
<img id="swish-QR" src="img/swish-QR.png">
104104
<section class="aside">
105-
106-
<div id="progress-container">
107-
<div id="progress-bar-markings">
108-
<div class="progress-bar-markings-container">
109-
<span>10 000kr</span>
110-
<div class="vl"></div>
111-
</div>
112-
<div class="progress-bar-markings-container">
113-
<span>20 000kr</span>
114-
<div class="vl"></div>
115-
</div>
116-
<div class="progress-bar-markings-container">
117-
<span>30 000kr</span>
118-
<div class="vl"></div>
119-
</div>
120-
<div class="progress-bar-markings-container">
121-
<span>40 000kr</span>
122-
<div class="vl"></div>
123-
</div>
124-
<div class="progress-bar-markings-container">
125-
<span style="visibility: hidden;">50 000 kr</span>
126-
<div class="vl" style="visibility: hidden;"></div>
127-
</div>
128-
</div>
129-
<div id="progress-bar">
130-
<div id="progress-bar-wrapper">
131-
<span id="progress-fill" class="loading"></span>
132-
</div>
133-
</div>
134-
</div>
135-
136-
<script>
137-
fetchCurrentProgress();
138-
139-
function fetchCurrentProgress() {
140-
const scriptURL = "https://script.google.com/macros/s/AKfycbxtLrgIy9K9MzmibNuueC_7no4pUSV8Zs1SwuRGAbl7IOydOVv5JxecbBKUKg04vJNhHQ/exec";
141-
142-
fetch(scriptURL, {
143-
redirect: "follow",
144-
method: 'GET',
145-
headers: {
146-
"Content-Type": "text/plain;charset=utf-8",
147-
}
148-
})
149-
.then((response) => response.json())
150-
.then((json) => {
151-
const progressFill = document.getElementById("progress-fill");
152-
progressFill.classList = "";
153-
const progressBarWrapper = document.getElementById("progress-bar-wrapper");
154-
const precent = 100 * ((parseFloat(json.data) + 10000) / 50000)
155-
progressBarWrapper.style.width = precent + "%";
156-
} );
157-
}
158-
</script>
159-
160105
<ul>
161106
<li>
162107
<h1>Förmåner</h1>
@@ -255,15 +200,13 @@ <h3>
255200
}
256201
})
257202

258-
const swish = document.querySelector('#formulär img');
203+
const swish = document.querySelector('#swish-QR');
259204
const formulär = document.querySelector('#formulär');
260-
const container = document.querySelector('#container');
261205

262206
form.style.opacity = 0;
263207
swish.style.opacity = 1;
264-
formulär.style.top = "-650px";
265-
formulär.style.overflowY = "visible";
266-
container.classList.add("no-overflow");
208+
formulär.style.display = "none";
209+
swish.style.display = "block";
267210
});
268211
</script>
269212
</main>

‎css/förköp.css.liquid‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,36 @@ permalink: css/förköp.css
33
eleventyExcludeFromCollections: true
44
---
55

6-
.no-overflow {
7-
overflow-y: hidden;
8-
}
9-
10-
@media(max-width: 900px) {
11-
.no-overflow {
12-
overflow-y: visible;
13-
}
14-
}
15-
166
#formulär {
177
max-width: 500px;
188
margin: 0 auto;
199
padding: 40px;
2010
flex-direction: column;
2111
display: flex;
2212
position: relative;
23-
top: 0;
24-
transition: top 1s;
25-
height: calc(100vh - 60px - 80px);
2613
min-height: calc(100vh - 60px - 80px);
2714
width: calc(100vw - 500px - 80px);
28-
overflow-y: hidden;
15+
justify-content: center;
2916
}
3017

3118
@media(max-width: 1000px) {
3219
#formulär {
33-
width: calc(100% - 80px);
34-
max-width: 500px;
20+
width: calc(100% - 40px);
21+
padding: 20px 20px 40px 20px;
22+
min-height: calc(100vh - 60px);
3523
margin: 0 auto;
3624
}
3725
}
3826

3927
#swish-QR {
4028
margin: auto;
41-
padding: 20px;
42-
height: 550px;
29+
padding: 80px 40px;
30+
width: calc(100% - 80px);
31+
max-width: 500px;
32+
height: fit-content;
4333
opacity: 0;
4434
transition: opacity 1s;
35+
display: none;
4536
z-index: -1;
4637
}
4738

‎css/index.css.liquid‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,13 @@ eleventyExcludeFromCollections: true
6565
display: flex;
6666
margin: 0 auto;
6767
padding: 30px 40px;
68+
gap: 80px;
6869
}
6970

7071
@media(max-width: 1700px) {
7172
.content-box {
7273
flex-direction: column;
74+
gap: 0px;
7375
}
7476
}
7577

0 commit comments

Comments
 (0)