Skip to content

Commit 06c734a

Browse files
myogpatternsmyogpatterns
committed
hardware incorporated, map scroll, css cleanup
1 parent 99ac5b7 commit 06c734a

File tree

6 files changed

+160
-185
lines changed

6 files changed

+160
-185
lines changed

‎assets/css/main.css‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2227,7 +2227,6 @@ input, select, textarea {
22272227

22282228
#nav li.active {
22292229
background-color: white;
2230-
border-bottom: transparent;
22312230
}
22322231
#nav li.active > a {
22332232
color: var(--primary);
@@ -2408,6 +2407,51 @@ input, select, textarea {
24082407
background-color: var(--primary);
24092408
}
24102409

2410+
/* ---- Button-Group ---- */
2411+
2412+
/* ui group */
2413+
2414+
.ui-group {
2415+
display: inline-block;
2416+
}
2417+
2418+
.ui-group .button-group {
2419+
display: inline-block;
2420+
margin-right: 1.5em;
2421+
}
2422+
2423+
.button-group:after {
2424+
content: '';
2425+
display: block;
2426+
clear: both;
2427+
}
2428+
2429+
.button-group > .button {
2430+
float: left;
2431+
border-radius: 0;
2432+
margin-left: 0;
2433+
margin-right: 1px;
2434+
padding: 0 2em;
2435+
}
2436+
2437+
.button-group .button:first-child { border-radius: 3.75em 0 0 3.75em; }
2438+
.button-group .button:last-child { border-radius: 0 3.75em 3.75em 0; }
2439+
2440+
2441+
2442+
2443+
@media screen and (max-width: 900px) {
2444+
.button-group > .button {
2445+
padding: 0 1.5em;
2446+
}
2447+
}
2448+
2449+
@media screen and (max-width: 425px) {
2450+
.filters {
2451+
display: none;
2452+
}
2453+
}
2454+
24112455
/* Form */
24122456

24132457
form {

‎assets/css/style.css‎

Lines changed: 23 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,17 @@
1-
/* :root {
2-
--buttonHighlight: hsl(180, 40%, 25%);
3-
--buttonHover: hsl(180, 40%, 65%);
4-
} */
5-
6-
7-
8-
/* ---- custom ----- */
9-
10-
/* body {
11-
font-family: "Source Sans Pro", "Open Sans", sans-serif;
12-
box-sizing: border-box;
13-
} */
14-
15-
/* a {text-decoration: none;} */
16-
17-
/* h1 {
18-
font-size: 2.5em;
19-
font-weight: 900;
20-
margin: 0.8em 0 0.6em 0;
21-
} */
22-
23-
/* .container {
24-
min-height: 100vh;
25-
display: flex;
26-
flex-direction: column;
27-
}
28-
.page-header, .page-footer {
29-
background-color: white;
30-
flex-grow: 0;
31-
flex-shrink: 0;
32-
padding: 1em 0;
33-
z-index: 10;
34-
} */
35-
36-
/* .sticky-top {
37-
position: -webkit-sticky;
38-
position: sticky;
39-
top: 0;
40-
} */
41-
/*
42-
.fill-screen {
43-
flex: 1;
44-
} */
45-
46-
/* .content {
47-
width: 80%;
48-
padding: .5em 0;
49-
margin: 0 auto;
50-
} */
51-
52-
/* .content::after {
53-
margin: 0;
54-
} */
55-
56-
/* .align-center {
57-
text-align: center;
58-
margin-bottom: 1.2em;
59-
} */
60-
1+
/* Styling for dynamic content on Map.html and Hardware.html
612
623
/* ---- cards ----- */
634

645
#card-shelf {
65-
margin: auto;
6+
/* margin: auto; */
667
display: grid;
67-
grid-template-columns: repeat(auto-fit, minmax(120px, 16.6%));
8+
grid-template-columns: repeat(auto-fit, minmax(120px, 20%));
689
grid-gap: 0px;
10+
padding-bottom:1rem;
6911
}
7012

7113
@media screen and (max-width: 480px) {
7214
#card-shelf {
73-
display: grid;
7415
grid-template-columns: repeat(auto-fit, minmax(120px, 50%));
7516
grid-gap: 0px;
7617
}
@@ -80,7 +21,7 @@
8021
display:grid;
8122
background: white;
8223
border: 0.1px solid lightslategray;
83-
box-sizing: border-box;
24+
text-align: left;
8425
}
8526

8627
.card img{
@@ -89,105 +30,44 @@
8930
object-fit: cover;
9031
}
9132

33+
.card p {
34+
margin: 0;
35+
}
36+
9237
.card-info {
93-
display: flex;
94-
flex-wrap: wrap;
95-
align-items: flex-start;
38+
display: grid;
9639
align-content: space-between;
97-
padding: 0 0.5em;
40+
padding: 0 0.5rem;
9841
}
9942

10043
.card-info .title{
101-
margin: 0 0 0.5em 0;
102-
width: 100%;
103-
font-weight:300;
10444
display: inherit;
10545
}
10646

107-
.card-info .vendor {
47+
.card-info .details {
10848
display: flex;
109-
justify-content: right;
49+
justify-content: space-between;
50+
align-items: center;
51+
flex-wrap: nowrap;
11052
}
11153

112-
.card-info .vendor, .option {
54+
.card-info .vendor {
11355
display: inherit;
11456
color: #667788;
115-
font-size: 0.7em;
116-
align-self: center;
117-
width:50%;
57+
}
58+
59+
.card-info .option {
60+
display: inherit;
61+
font-size: 0.8rem;
11862
}
11963

12064
.card-info .vendor img {
12165
margin: 8px;
122-
width: 32px;
66+
width: 40px;
12367
aspect-ratio: 1 / 1;
124-
border-radius: 16px;
68+
border-radius: 20px;
12569
}
12670

127-
/* ---- buttons ----- */
128-
129-
.button {
130-
display: inline-block;
131-
padding: 0.5em 1.0em;
132-
background: #EEE;
133-
border: none;
134-
border-radius: 7px;
135-
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
136-
color: #222;
137-
text-shadow: 0 1px white;
138-
cursor: pointer;
139-
}
140-
141-
.button:hover {
142-
background-color: var(--buttonHover, #8CF);
143-
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
144-
color: rgb(71, 71, 71);
145-
}
146-
147-
.button:active,
148-
.button.is-checked {
149-
color: hsl(0, 0%, 90%);
150-
background-color: var(--buttonHighlight, #28F);
151-
}
152-
153-
.button.is-checked {
154-
color: white;
155-
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
156-
}
157-
158-
.button:active {
159-
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
160-
}
161-
162-
/* button-group */
163-
164-
.button-group:after {
165-
content: '';
166-
display: block;
167-
clear: both;
168-
}
169-
170-
.button-group .button {
171-
float: left;
172-
border-radius: 0;
173-
margin-left: 0;
174-
margin-right: 1px;
175-
}
176-
177-
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
178-
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
179-
180-
181-
/* ui group */
182-
183-
.ui-group {
184-
display: inline-block;
185-
}
186-
187-
.ui-group .button-group {
188-
display: inline-block;
189-
margin-right: 1.5em;
190-
}
19171

19272

19373
/* ---- leaflet.js map ---- */

‎assets/js/hardware.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
/*
2-
Displays products from allproducts.json
3-
allproducts.json created with db-capture.py
4-
*/
5-
const allProducts = "assets/db/allproducts.json";
6-
const imgdir = "images/shared/partners/48/"
1+
2+
// Displays products from allproducts.json
3+
// allproducts.json created with db-capture.py
4+
5+
var allProducts = "assets/db/allproducts.json";
6+
var imgdir = "images/shared/partners/48/";
77

88

99
// displayProductsfromArray(data);
10-
const product_list = getProducts(allProducts);
10+
var product_list = getProducts(allProducts);
1111

1212
async function getProducts(array) {
1313
const response = await fetch(array);
@@ -39,8 +39,10 @@ function displayProducts(product_list){
3939
`<img src="${product.productImg}" loading="lazy" alt="product image">
4040
<div class="card-info">
4141
<p class="title">${title}</p>
42-
<p class="option">${productsizes}</p>
43-
<p class="vendor"><a href=${product.url} target=_blank title="product url"><img src=${imgdir}${product.vendorImg} alt="vendor logo"></a></p>
42+
<div class="details">
43+
<p class="option">${productsizes}</p>
44+
<p class="vendor"><a href=${product.url} target=_blank title="product url"><img src=${imgdir}${product.vendorImg} alt="vendor logo"></a></p>
45+
</div>
4446
</div>
4547
</div>`;
4648
cards.appendChild(card);
@@ -80,9 +82,9 @@ $('.filters').on('click', '.button', function( event ) {
8082
$('.button-group').each( function( i, buttonGroup ) {
8183
var $buttonGroup = $( buttonGroup );
8284
$buttonGroup.on( 'click', 'button', function( event ) {
83-
$buttonGroup.find('.is-checked').removeClass('is-checked');
85+
$buttonGroup.find('.is-checked').removeClass('is-checked primary');
8486
var $button = $( event.currentTarget );
85-
$button.addClass('is-checked');
87+
$button.addClass('is-checked primary');
8688
});
8789
});
8890
// flatten object by concatting values

‎assets/js/map.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// https://github.com/risan/country-flag-emoji-json
88
const CountryFlagEmojiJSON = "https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/index.json"
99

10-
const map = L.map('map').setView([40, -53], 3);
10+
const map = L.map('map', {worldCopyJump: true, center: [40,-53], zoom: 3});
1111

1212
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
1313
maxZoom: 9,
@@ -37,9 +37,6 @@ async function getFlagEmoji( array, data ) {
3737
} catch (TypeError) {
3838
marker["flag"] = "🏴‍☠️";
3939
}
40-
// if (marker.friend) {
41-
// marker["flag"] += "⭐️";
42-
// }
4340
})
4441
drawMarkers( data )
4542
}

0 commit comments

Comments
 (0)