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 if user != nil
SidebarButton("Support", "/support", "heart") SidebarButton("Support", "/support", "heart")
//- if arn.IsDevelopment() if arn.IsDevelopment()
//- SidebarButton("Groups", "/groups", "users") SidebarButton("Groups", "/groups", "users")
//- Disabled: //- Disabled:
//- SidebarButton("Dash", "/dashboard", "tachometer") //- SidebarButton("Dash", "/dashboard", "tachometer")

View File

@ -1,10 +1,16 @@
component Group(group *arn.Group, user *arn.User) component Group(group *arn.Group, user *arn.User)
GroupTabs(group, user) GroupTabs(group, user)
.group-header
if group.Name != "" if group.Name != ""
h1.mountable= group.Name h1.group-page-name.mountable= group.Name
else 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-view
.group-sidebar.mountable .group-sidebar.mountable

View File

@ -1,9 +1,8 @@
.group-view .group-view
horizontal-wrap horizontal-wrap
width 100% width 100%
max-width 900px max-width 1000px
margin 0 auto margin 0 auto
border 1px solid red
< 1100px < 1100px
.group-view .group-view
@ -11,10 +10,11 @@
.group-feed .group-feed
flex 1 flex 1
padding 1rem padding 0 1rem
.group-sidebar .group-sidebar
flex-basis 300px flex-basis 300px
max-width 300px
.group-sidebar-section .group-sidebar-section
ui-element ui-element
@ -24,3 +24,15 @@
.group-members .group-members
margin-bottom 0.5rem margin-bottom 0.5rem
justify-content flex-start 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 const group-padding-x = 0.75rem
.groups .groups
horizontal-wrap display grid
justify-content space-around grid-gap calc(content-padding / 2)
// grid-template-columns repeat(auto-fill, min(100%, 520px))
// justify-content center
.group .group
horizontal horizontal
ui-element ui-element
position relative position relative
width 100% // width 100%
max-width 520px // max-width 520px
padding group-padding-y group-padding-x padding group-padding-y group-padding-x
margin calc(content-padding / 2)
color text-color color text-color
:hover :hover

View File

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