git ssb

2+

mixmix / ticktack



Commit 8c00d2692c05faece6e79ee8158e2cbf6612e078

Browse Files

refactor common Scroller style out

mix committed on 1/25/2018, 3:43:01 AM
Parent: aa4c25f3c365e275c42b08f8e34ef4e6c2b66d93

Files changed

app/html/scroller.mcsschanged
app/page/blogIndex.mcsschanged
app/page/blogSearch.mcsschanged
app/page/blogShow.jschanged
app/page/blogShow.mcsschanged
app/page/userShow.mcsschanged
app/page/addressBook.mcssadded
app/html/scroller.mcssView
@@ -1,34 +1,38 @@
11 Scroller {
2-
32 overflow: auto
43 width: 100%
54 height: 100%
65 min-height: 0px
76
8- /* div.wrapper { */
9- /* align-self: center */
7+ section.top {
8+ /* position: sticky */
9+ left: 0
10+ right: 0
11+ top: 0
12+ z-index: 99
1013
11- /* flex: 1 1 */
12- /* $threadWidth */
13- /* padding-top: .5rem */
14+ background-color: #fff
15+ }
1416
15- /* section.content { */
16- /* div { */
17- /* border-bottom: solid 1px gainsboro */
18- /* } */
19- /* } */
20- /* } */
21-}
17+ section.content {
18+ background-color: #fff
19+ $maxWidth
20+ margin: .8rem auto
21+ padding: .5rem 2rem
2222
23-Scroller -errors {
24- div.wrapper {
25- width: initial
26- max-width: 100%
23+ display: flex
24+ flex-wrap: wrap
2725
28- section.content div {
29- border: none
30- }
3126 }
27+
28+ section.bottom {
29+ }
3230 }
3331
32+/* Scroller -errors { */
33+/* section.content div { */
34+/* border: none */
35+/* } */
36+/* } */
3437
38+
app/page/blogIndex.mcssView
@@ -1,28 +1,13 @@
11 Page -blogIndex {
2- div.content { padding: 0 }
2+ div.content.Scroller {
3+ padding: 0
34
4- div.Scroller.content {
5-
65 section.top {
76 position: sticky
8- left: 0
9- right: 0
10- top: 0
11- z-index: 99
12-
13- background-color: #fff
147 }
158
169 section.content {
17- background-color: #fff
18- $maxWidth
19- margin: .8rem auto
20- padding: .5rem 2rem
21-
22- display: flex
23- flex-wrap: wrap
24-
2510 div.BlogCard {
2611 flex-basis: 100%
2712 border-bottom: 1px solid rgba(0,0,0, .1)
2813 }
app/page/blogSearch.mcssView
@@ -1,18 +1,11 @@
11 Page -blogSearch {
2- div.content { padding: 0 }
2+ div.content.Scroller {
3+ padding: 0
34
4- div.Scroller.content {
5-
65 section.top {
76 position: sticky
8- left: 0
9- right: 0
10- top: 0
11- z-index: 99
127
13- background-color: #fff
14-
158 div.search {
169 border-top: 1px solid gainsboro
1710 border-bottom: 2px solid #f5f6f7
1811 padding: 1rem
@@ -50,16 +43,8 @@
5043 }
5144 }
5245
5346 section.content {
54- background-color: #fff
55- $maxWidth
56- padding: .5rem 2rem
57- margin: .8rem auto
58-
59- display: flex
60- flex-wrap: wrap
61-
6247 div.BlogCard {
6348 flex-basis: 100%
6449
6550 border-bottom: 1px solid gainsboro
app/page/blogShow.jsView
@@ -40,9 +40,9 @@
4040 const { timeago, channel, markdown, compose } = api.message.html
4141
4242 return h('Page -blogShow', [
4343 api.app.html.sideNav({ page: 'discover' }), // HACK to highlight discover
44- h('div.content', [
44+ h('Scroller.content', [
4545 h('section.top', [
4646 api.app.html.topNav(location)
4747 ]),
4848 h('section.content', [
app/page/blogShow.mcssView
@@ -1,35 +1,35 @@
11 Page -blogShow {
22 // div.context {}
33
4- div.content {
4+ div.Scroller.content {
55 padding: 0
66 section.top {
77 position: sticky
8- left: 0
9- right: 0
10- /* top: 0 */
11- background-color: #fff
8+ top: initial
129
1310 div.blogHeader {
1411 }
1512 }
1613
1714 section.content {
18- $maxWidth
15+ background-color: initial
1916 padding: .8rem
20- margin: 0 auto
17+ margin: 1rem auto
2118
19+ display: flex
20+
2221 header {
2322 $backgroundPrimaryText
23+ flex-basis: 100%
2424 padding: 1.5rem
2525
2626 display: flex
2727
2828 div.blog {
2929 display: flex
3030 flex-wrap: wrap
31- flex-grow: 1
31+ flex-basis: 100%
3232 align-items: center
3333
3434 h1 {
3535 flex-basis: 100%
@@ -71,8 +71,9 @@
7171 }
7272
7373 div.break {
7474 padding: 0 1.5rem
75+ flex-basis: 100%
7576 $backgroundPrimaryText
7677
7778 hr {
7879 margin: 0
@@ -88,8 +89,9 @@
8889 margin-bottom: 1.5rem
8990 }
9091
9192 div.Comments {
93+ flex-basis: 100%
9294 }
9395 }
9496 }
9597 }
app/page/userShow.mcssView
@@ -1,12 +1,11 @@
11 Page -userShow {
2- div.content { padding: 0 }
2+ div.content.Scroller {
3+ padding: 0
34
4- div.Scroller.content {
55 section.top {
66 section.about {
7- margin-top: 4rem
8- margin-bottom: 4rem
7+ padding: 4rem 0
98
109 display: flex
1110 flex-direction: column
1211 align-items: center
@@ -45,20 +44,11 @@
4544 }
4645 }
4746
4847 section.content {
49- background-color: #fff
50- $maxWidth
51- margin: .8rem auto
52- padding: .5rem 2rem
53-
54- display: flex
55- flex-wrap: wrap
56-
5748 div.BlogCard {
5849 flex-basis: 100%
5950 border-bottom: 1px solid rgba(0,0,0, .1)
60- /* margin-bottom: .5rem */
6151
6252 div.context {
6353 div.Link { display: none }
6454 div.name { display: none }
app/page/addressBook.mcssView
@@ -1,0 +1,24 @@
1+Page -blogIndex {
2+ div.content.Scroller {
3+ padding: 0
4+
5+ section.top {
6+ position: sticky
7+ }
8+
9+ section.content {
10+ div.BlogCard {
11+ flex-basis: 100%
12+ border-bottom: 1px solid rgba(0,0,0, .1)
13+ }
14+ }
15+
16+ section.bottom {
17+ div.Button {
18+ margin: 1rem 0
19+ }
20+ }
21+ }
22+}
23+
24+

Built with git-ssb-web