shopr

Check-in [cdfd2f0ef7]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Start cleaning up the CSS layout
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256:cdfd2f0ef7f6894fb296b4d6f5f5b26a62fa618428359ef72fc3971062af0e39
User & Date: vandys 2019-06-21 03:52:45
Context
2019-06-21
16:29
Tidy up top line check-in: 07484c5ab0 user: vandys tags: trunk
03:52
Start cleaning up the CSS layout check-in: cdfd2f0ef7 user: vandys tags: trunk
2019-06-20
23:54
Continue bringup; start fleshing out styling. check-in: 5cf6b89eed user: vandys tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/shopr.css.

1
2
3
4
5
6




















7
8
9
10
11
12
13


14
15
16

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body {
 background: LightBlue;
}
div {
 width: 100%;
}




















#items {
 display: flex;
 flex-wrap: wrap;
}
#items > span {
 flex-grow: 0;
 min-width: 15px;


}
.isel {
 flex-grow: 1fr;

}
#items > span:nth-child(3n+1) {
 background: pink;
}
#items > span:nth-child(3n+2) {
 background: LightGreen;
}
#items > span:nth-child(3n+3) {
 background: yellow;
}
#scrlists2 > span {
 background: pink;
 font-size: large;
 border: 3px solid black;
 border-radius: 6px;
 padding: 4px;
}






>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>






|
>
>


|
>












<


<

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

52
53

54
body {
 background: LightBlue;
}
div {
 width: 100%;
}
span {
 font-size: large;
 padding: 4px;
}
#scrlist2 {
 margin-bottom: 15px;
}
#scrlist2 > * {
 border: 3px solid black;
 border-radius: 6px;
}
#spanR {
 background: pink;
}
#spanG {
 background: PaleGreen;
}
#spanY {
 background: lightyellow;
}
#items {
 display: flex;
 flex-wrap: wrap;
}
#items > span {
 flex-grow: 0;
 min-width: 25px;
 text-align: center;
 border-bottom: 3px solid black;
}
.isel {
 flex-grow: 1 !important;
 min-width: 50% !important;
}
#items > span:nth-child(3n+1) {
 background: pink;
}
#items > span:nth-child(3n+2) {
 background: LightGreen;
}
#items > span:nth-child(3n+3) {
 background: yellow;
}
#scrlists2 > span {
 background: pink;

 border: 3px solid black;
 border-radius: 6px;

}

Changes to html/shopr.html.

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 Select the list to use:
 <hr>
 <div id="scrlists2">
 </div>
</div>

<div id="scrlist" style="display: none;">
 <div>
  <span>+RGY</span>
  <span>R</span>
  <span>G</span>
  <span>Y</span>
  <input type="text" id="ifilter" placeholder="Choose or Add">
  <span>+</span>
  <img src="/img/menu.svg" />
 </div>
 <div id="items">
 </div>
</div>







|
|
|
|
|







21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 Select the list to use:
 <hr>
 <div id="scrlists2">
 </div>
</div>

<div id="scrlist" style="display: none;">
 <div id="scrlist2">
  <span style="background: white;">+RGY</span>
  <span id="spanR" onclick="filtR();">R</span>
  <span id="spanG" onclick="filtG();">G</span>
  <span id="spanY" onclick="filtY();">Y</span>
  <input type="text" id="ifilter" placeholder="Choose or Add">
  <span>+</span>
  <img src="/img/menu.svg" />
 </div>
 <div id="items">
 </div>
</div>