Improved groups display on mobile

This commit is contained in:
Eduard Urbach 2018-11-21 16:37:24 +09:00
parent fecc09eee2
commit 7650137b4d
5 changed files with 36 additions and 15 deletions

View File

@ -43,8 +43,8 @@ component Sidebar(user *arn.User)
if user != nil
SidebarButton("Support", "/support", "heart")
//- if arn.IsDevelopment()
//- SidebarButton("Groups", "/groups", "users")
if arn.IsDevelopment()
SidebarButton("Groups", "/groups", "users")
//- Disabled:
//- SidebarButton("Dash", "/dashboard", "tachometer")

View File

@ -1,10 +1,16 @@
component Group(group *arn.Group, user *arn.User)
GroupTabs(group, user)
.group-header
if group.Name != ""
h1.mountable= group.Name
h1.group-page-name.mountable= group.Name
else
h1.mountable untitled
h1.group-page-name.mountable untitled
if group.Tagline != ""
p.group-page-tagline.mountable= group.Tagline
else
p.group-page-tagline.mountable no tagline yet
.group-view
.group-sidebar.mountable

View File

@ -1,9 +1,8 @@
.group-view
horizontal-wrap
width 100%
max-width 900px
max-width 1000px
margin 0 auto
border 1px solid red
< 1100px
.group-view
@ -11,10 +10,11 @@
.group-feed
flex 1
padding 1rem
padding 0 1rem
.group-sidebar
flex-basis 300px
max-width 300px
.group-sidebar-section
ui-element
@ -24,3 +24,15 @@
.group-members
margin-bottom 0.5rem
justify-content flex-start
.group-header
margin-bottom content-padding
.group-page-name
margin 0
.group-page-tagline
text-align center
&.mounted
opacity 0.6 !important

View File

@ -2,17 +2,18 @@ const group-padding-y = 0.75rem
const group-padding-x = 0.75rem
.groups
horizontal-wrap
justify-content space-around
display grid
grid-gap calc(content-padding / 2)
// grid-template-columns repeat(auto-fill, min(100%, 520px))
// justify-content center
.group
horizontal
ui-element
position relative
width 100%
max-width 520px
// width 100%
// max-width 520px
padding group-padding-y group-padding-x
margin calc(content-padding / 2)
color text-color
:hover

View File

@ -0,0 +1,2 @@
mixin debug-border
border 1px solid red