maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve dashboard action buttons' styling (#808)

Browse source 
* Use full content width (one line with content below)
* Fix gap between actions
* Add hover color and transition for opacity
* Decrease font size a little bit
* Force break "POSTS" and "(123)" into two lines when width is 600-800px
This commit is contained in:
Felix Edelmann 2018-10-09 22:11:09 +02:00 • committed by Ben Halpern
parent c0099475d7
commit 763f97f76f
3 changed files with 44 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/assets/stylesheets/dashboard.scss
View file

@ -23,25 +23,47 @@
}
}
.actions{
text-align:center;
padding:10px 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 2% 0; /* about .dashboard-container's left / right margin */
@media screen and ( min-width: 600px ){
flex-direction: row;
}
.action{
width:calc(90% - 26px);
margin:7px 3px;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
width: 100%;
color:$black;
padding:10px 0px;
border-radius:3px;
min-width:115px;
display:inline-block;
transition: background-color 250ms ease;
transition: background-color 250ms ease, opacity 250ms ease;
font-family: $helvetica-condensed;
font-stretch:condensed;
font-size: 1.2em;
font-size: 1.1em;
text-align: center;
&.active{
background: $purple;
}
@media screen and ( min-width: 600px ){
width:calc(25% - 16px);
&:not(.active):hover{
background: $light-medium-purple;
}
&:not(:last-child) {
/* gap between actions */
margin-bottom: 8px;
@media screen and ( min-width: 600px ){
margin-bottom: 0;
margin-right: 8px;
}
}
span {
display: inline-block;
@media screen and ( min-width: 600px ) and ( max-width: 800px ){
display: block;
}
}
}
}

1
app/assets/stylesheets/variables.scss
View file

@ -5,6 +5,7 @@ $green: #66e2d5;
$light-green: lighten($green,30%);
$dark-purple: #4e57ef;
$purple: #cfd7ff;
$light-medium-purple: lighten($purple, 4%);
$light-purple: lighten($purple, 7%);
$blue: #1395b8;
$sky-blue: #557de8;

15
app/views/dashboards/show.html.erb
View file

@ -2,9 +2,18 @@
<div class="dashboard-container">
<div class="actions">
<a class="action <%= 'active' if params[:which] == "organization" || params[:which].blank? %>" href="/dashboard">POSTS (<%= @user.articles_count %>)</a>
<a class="action <%= 'active' if params[:which] == "user_followers" %>" href="/dashboard/user_followers">FOLLOWERS (<%= @user.followers_count %>)</a>
<a class="action <%= 'active' if params[:which] == "following_users" %>" href="/dashboard/following_users">FOLLOWING (<%= @user.following_users_count %>)</a>
<a class="action <%= 'active' if params[:which] == "organization" || params[:which].blank? %>" href="/dashboard">
<span>POSTS</span>
<span>(<%= @user.articles_count %>)</span>
</a>
<a class="action <%= 'active' if params[:which] == "user_followers" %>" href="/dashboard/user_followers">
<span>FOLLOWERS</span>
<span>(<%= @user.followers_count %>)</span>
</a>
<a class="action <%= 'active' if params[:which] == "following_users" %>" href="/dashboard/following_users">
<span>FOLLOWING</span>
<span>(<%= @user.following_users_count %>)</span>
</a>
</div>
<% if @user.org_admin && @user.organization %>
<h1>