BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 8b3b6f10 by Drew Blessing
Options

Mobile UI improvements for dashboard/nav

Style navbar toggle button Style navbar toggle manually instead of with button classes Style navbar Modify color Turn off all tooltips for touch devices Style main nav Fix scrolling navbar collapse Style tweaks Minor tweaks Style no ssh key message
parent 8f8db776
Showing with 124 additions and 17 deletions
app/assets/stylesheets/generic/common.scss
......@@ -327,6 +327,12 @@ li.note {
color: #fff;
text-decoration: underline;
}
.links-xs {
text-align: center;
font-size: 16px;
padding: 5px;
}
}
.warning_message {
......@@ -485,3 +491,7 @@ table {
margin-bottom: 15px;
}
}
@media (max-width: $screen-xs-max) {
.container .content { margin-top: 20px; }
}
app/assets/stylesheets/main/layout.scss
html {
overflow-y: scroll;
&.touch .tooltip { display: none !important; }
}
body {
......
app/assets/stylesheets/sections/header.scss
......@@ -29,6 +29,59 @@ header {
float: right;
margin-right: 0;
}
.navbar-toggle {
color: $style_color;
margin: 0 -15px 0 0;
padding: 10px;
border-radius: 0;
button i { font-size: 22px; }
&.collapsed { background-color: transparent !important;}
&:hover {
background-color: #EEE;
}
}
}
@media (max-width: $screen-xs-max) {
border-width: 0;
font-size: 18px;
.app_logo { margin-left: -15px; }
.project_name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
max-width: 70%;
}
.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.navbar-nav {
margin: 5px 0;
.visible-xs, .visable-sm {
display: table-cell !important;
}
}
li {
display: table-cell;
width: 1%;
a {
text-align: center;
font-size: 18px !important;
}
}
}
}
......@@ -128,6 +181,8 @@ header {
background: #708090;
border-bottom: 1px solid #AAA;
.navbar-toggle { color: #fff; }
.nav > li > a {
color: #AAA;
text-shadow: 0 1px 0 #444;
......
app/assets/stylesheets/sections/nav.scss
......@@ -83,4 +83,38 @@
padding-top: 2px;
}
}
@media (max-width: $screen-xs-max) {
font-size: 18px;
margin: 0;
max-height: none;
&, .container {
padding: 0;
border-top: 0;
}
ul {
height: auto;
li {
display: list-item;
width: auto;
padding: 5px 0;
&.active {
background-color: $primary_color;
a {
color: #fff;
font-weight: normal;
text-shadow: none;
&:after { display: none; }
}
}
}
}
}
}
app/assets/stylesheets/themes/ui_color.scss
......@@ -18,7 +18,7 @@
.navbar-inner {
background: #547;
border-bottom: 1px solid #435;
.app_logo {
.app_logo, .navbar-toggle {
&:hover {
background-color: #435;
}
......
app/assets/stylesheets/themes/ui_gray.scss
......@@ -18,7 +18,7 @@
.navbar-inner {
background: #373737;
border-bottom: 1px solid #272727;
.app_logo {
.app_logo, .navbar-toggle {
&:hover {
background-color: #272727;
}
......
app/assets/stylesheets/themes/ui_mars.scss
......@@ -18,7 +18,7 @@
.navbar-inner {
background: #474D57;
border-bottom: 1px solid #373D47;
.app_logo {
.app_logo, .navbar-toggle {
&:hover {
background-color: #373D47;
}
......
app/assets/stylesheets/themes/ui_modern.scss
......@@ -18,7 +18,7 @@
.navbar-inner {
background: #345;
border-bottom: 1px solid #234;
.app_logo {
.app_logo, .navbar-toggle {
&:hover {
background-color: #234;
}
......
app/views/dashboard/show.html.haml
......@@ -2,7 +2,7 @@
.dashboard.row
.activities.col-md-8
= render 'activities'
.side.col-md-4.hidden-sm
.side.col-md-4.hidden-sm.hidden-xs
= render 'sidebar'
- else
......
app/views/layouts/_head_panel.html.haml
......@@ -14,14 +14,14 @@
.navbar-collapse.collapse
%ul.nav.navbar-nav
%li
%li.hidden-sm.hidden-xs
%a
%div.hide.turbolink-spinner
%i.icon-refresh.icon-spin
Loading...
%li.hidden-sm
%li.hidden-sm.hidden-xs
= render "layouts/search"
%li.visible-sm
%li.visible-sm.visible-xs
= link_to search_path, title: "Search", class: 'has_bottom_tooltip', 'data-original-title' => 'Search area' do
%i.icon-search
%li
......
app/views/layouts/admin.html.haml
......@@ -4,7 +4,7 @@
%body{class: "#{app_theme} admin", :'data-page' => body_data_page}
= render "layouts/head_panel", title: "Admin area"
= render "layouts/flash"
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/admin'
.container
......
app/views/layouts/application.html.haml
......@@ -5,7 +5,7 @@
= render "layouts/broadcast"
= render "layouts/head_panel", title: "Dashboard"
= render "layouts/flash"
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/dashboard'
.container
......
app/views/layouts/group.html.haml
......@@ -5,7 +5,7 @@
= render "layouts/broadcast"
= render "layouts/head_panel", title: "group: #{@group.name}"
= render "layouts/flash"
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/group'
.container
......
app/views/layouts/profile.html.haml
......@@ -5,7 +5,7 @@
= render "layouts/broadcast"
= render "layouts/head_panel", title: "Profile"
= render "layouts/flash"
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/profile'
.container
......
app/views/layouts/project_settings.html.haml
......@@ -9,7 +9,7 @@
- if can?(current_user, :download_code, @project)
= render 'shared/no_ssh'
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/project'
.container
......
app/views/layouts/projects.html.haml
......@@ -9,7 +9,7 @@
- if can?(current_user, :download_code, @project)
= render 'shared/no_ssh'
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/project'
.container
......
app/views/layouts/public_projects.html.haml
......@@ -3,7 +3,7 @@
= render "layouts/head", title: @project.name_with_namespace
%body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/public_head_panel"
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/project'
.container
.content= yield
app/views/layouts/user_team.html.haml
......@@ -4,7 +4,7 @@
%body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/head_panel", title: "team: #{@team.name}"
= render "layouts/flash"
%nav.main-nav
%nav.main-nav.navbar-collapse.collapse
.container= render 'layouts/nav/team'
.container
......
app/views/shared/_no_ssh.html.haml
......@@ -2,7 +2,13 @@
.no-ssh-key-message
.container
You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', new_profile_key_path} to your profile
%div.pull-right
.pull-right.hidden-xs
= link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true
|
= link_to 'Remind later', '#', class: 'hide-no-ssh-message'
.links-xs.visible-xs
= link_to "Add key", new_profile_key_path
|
= link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'hide-no-ssh-message', remote: true
|
= link_to 'Later', '#', class: 'hide-no-ssh-message'
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment