Commit 12acf15c authored by Andrey's avatar Andrey

Project page Update

refactoring buttons, fixes for projects filter on the dashboard and
group page
parent 1868c8b2
body {
text-rendering: geometricPrecision;
}
.btn { .btn {
@extend .btn-default; @extend .btn-default;
...@@ -88,3 +91,138 @@ ...@@ -88,3 +91,138 @@
} }
} }
} }
@mixin btn-info {
@include border-radius(2px);
border-width: 1px;
border-style: solid;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
line-height: 18px;
padding: 11px 16px;
letter-spacing: .4px;
&:hover {
border-width: 1px;
border-style: solid;
}
&:focus {
border-width: 1px;
border-style: solid;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border-width: 1px;
border-style: solid;
}
}
@mixin btn-middle {
@include border-radius(2px);
border-width: 1px;
border-style: solid;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
line-height: 18px;
padding: 11px 24px;
letter-spacing: .4px;
&:hover {
border-width: 1px;
border-style: solid;
}
&:focus {
border-width: 1px;
border-style: solid;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border-width: 1px;
border-style: solid;
}
}
@mixin btn-green {
background-color: #28b061;
border: 1px solid #26a65c;
color: #fff;
&:hover {
background-color: #26ab5d;
border: 1px solid #229954;
color: #fff;
}
&:focus {
background-color: #26ab5d;
border: 1px solid #229954;
color: #fff;
}
&:active {
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
background-color: #23a158 !important;
border: 1px solid #229954 !important;
color: #fff !important;
}
}
/*Butons*/
@mixin bnt-project {
background-color: #f0f2f5;
border-color: #dce0e5;
color: #313236;
&:hover {
border-color:#dce0e5;
background-color: #ebeef2;
color: #313236;
}
&:focus {
border-color: #dce0e5;
background-color: #ebeef2;
color: #313236;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
color: #313236 !important;
border-color: #c6cacf !important;
background-color: #e4e7ed !important;
}
}
@mixin btn-remove {
background-color: #f72e60;
border-color: #ee295a;
&:hover {
background-color: #e82757;
border-color: #e32555;
}
&:focus {
background-color: #e82757;
border-color: #e32555;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
background-color: #d42450 !important;
border-color: #e12554 !important;
}
}
\ No newline at end of file
...@@ -26,7 +26,6 @@ header { ...@@ -26,7 +26,6 @@ header {
min-height: $header-height; min-height: $header-height;
background-color: #fff; background-color: #fff;
border: none; border: none;
border-bottom: 1px solid #EEE;
.container-fluid { .container-fluid {
width: 100% !important; width: 100% !important;
......
...@@ -21,12 +21,11 @@ ...@@ -21,12 +21,11 @@
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
background: #f1f4f8; background: #EAEBEC;
.container-fluid { .container-fluid {
background: #FFF; background: #FFF;
padding: $gl-padding; padding: $gl-padding;
border: 1px solid #e7e9ed;
min-height: 90vh; min-height: 90vh;
&.container-blank { &.container-blank {
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
* Headers * Headers
* *
*/ */
body {
body { text-rendering:optimizeLegibility;
text-rendering: optimizeLegibility -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
} }
.page-title { .page-title {
margin-top: 0px; margin-top: 0px;
......
...@@ -10,3 +10,9 @@ ...@@ -10,3 +10,9 @@
.milestone-row { .milestone-row {
@include str-truncated(90%); @include str-truncated(90%);
} }
.dashboard .side .panel .panel-heading .input-group {
.form-control {
height: 42px;
}
}
\ No newline at end of file
.alert_holder {
margin: -16px;
.alert-link {
font-weight: normal;
}
}
.no-ssh-key-message {
background-color: #f28d35;
margin-bottom: 16px;
}
.new_project, .new_project,
.edit_project { .edit_project {
fieldset.features { fieldset.features {
...@@ -59,7 +70,7 @@ ...@@ -59,7 +70,7 @@
background: #FFF; background: #FFF;
font-size: 14px; font-size: 14px;
height: 42px; height: 42px;
margin-left: -2px; margin-left: -1px;
} }
} }
...@@ -75,44 +86,14 @@ ...@@ -75,44 +86,14 @@
top: 17px; top: 17px;
margin-bottom: 44px; margin-bottom: 44px;
} }
.project-repo-buttons { .project-repo-buttons {
margin-top: 12px; margin-top: 12px;
margin-bottom: 0px; margin-bottom: 0px;
.btn { .btn {
@extend .btn-info; @include bnt-project;
@include border-radius(2px); @include btn-info;
background-color: #f0f2f5;
border: 1px solid #dce0e5;
text-transform: uppercase;
color: #313236;
font-size: 13px;
font-weight: 600;
line-height: 18px;
padding: 11px 16px;
margin-left: 12px;
&:hover {
@include border-radius(2px);
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
}
&:focus {
@include border-radius(2px);
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
}
&:active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
color: #313236 !important;
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
}
.count { .count {
display: inline-block; display: inline-block;
...@@ -123,6 +104,7 @@ ...@@ -123,6 +104,7 @@
.split-one { .split-one {
display: inline-table; display: inline-table;
margin-right: 12px;
a { a {
margin: -1px !important; margin: -1px !important;
...@@ -138,7 +120,7 @@ ...@@ -138,7 +120,7 @@
cursor: auto; cursor: auto;
@extend .monospace; @extend .monospace;
background: #FAFAFA; background: #FAFAFA;
width: 100%; width: 101%;
} }
.input-group-addon { .input-group-addon {
...@@ -154,99 +136,59 @@ ...@@ -154,99 +136,59 @@
border-left: 1px solid #c6cacf; border-left: 1px solid #c6cacf;
margin-left: -2px !important; margin-left: -2px !important;
} }
input-group-btn:first-child > .btn {
@include border-radius-left(0);
}
} }
} }
} }
.projects-search-form { .projects-search-form {
.input-group .btn-success {
background-color: #2ebf6b !important;
border: 1px solid #28b061 !important;
color: #fff !important;
&:hover {
background-color: #2eb867 !important;
}
&:focus {
background-color: #2eb867 !important;
}
&:active {
@include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
background-color: #28b061 !important;
border: 1px solid #26a65c !important;
color: #fff !important;
}
}
.input-group .form-control { .input-group .form-control {
height: 39px !important; height: 42px;
} }
} }
.input-group-btn > .btn { .input-group-btn {
background-color: #f0f2f5; .btn {
border: 1px solid #dce0e5; @include bnt-project;
text-transform: uppercase; @include btn-middle;
color: #313236;
font-size: 13px;
font-weight: 600;
&:focus { &:hover {
outline: none; outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
} }
&:hover { &:focus {
outline: none; outline: none;
color: #313236;
border: 1px solid #dce0e5;
background-color: #ebeef2;
} }
&:active { &:active {
outline: none;
}
}
.active {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
color: #313236 !important;
border: 1px solid #c6cacf !important; border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important; background-color: #e4e7ed !important;
} }
} .btn-green {
@include btn-green
.input-group-btn > .btn.active { }
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
color: #313236 !important;
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
} }
.split-repo-buttons { .split-repo-buttons {
display: inline-table; display: inline-table;
margin-left: 12px; margin: 0 12px 0 12px;
.btn { .btn{
margin: 0 !important; @include bnt-project;
} @include btn-info;
.dropdown {
margin: 0 !important;
} }
.dropdown-toggle { .dropdown-toggle {
margin: -5px !important; margin: -5px;
} }
} }
...@@ -254,16 +196,19 @@ ...@@ -254,16 +196,19 @@
margin-left: 5px; margin-left: 5px;
} }
.open > .dropdown-toggle.btn { .dropdown-new {
margin-left: -5px;
}
.open > .dropdown-new.btn {
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
border: 1px solid #c6cacf !important; border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important; background-color: #e4e7ed !important;
text-transform: uppercase; text-transform: uppercase;
color: #313236; color: #313236 !important;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #313236 !important;
} }
.dropdown-menu { .dropdown-menu {
...@@ -431,32 +376,12 @@ table.table.protected-branches-list tr.no-border { ...@@ -431,32 +376,12 @@ table.table.protected-branches-list tr.no-border {
} }
.nav > li > a { .nav > li > a {
border: 1px solid transparent; @include btn-info;
color: #313236; @include bnt-project;
font-size: 13px;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
margin: 0 8px 0 0;
padding: 10px 16px 10px 16px;
&:hover {
@include border-radius(2px);
border: 1px solid #dce0e5;
background-color: #f0f2f5;
}
&:focus {
@include border-radius(2px);
border: 1px solid #dce0e5;
background-color: #f0f2f5;
}
&:active { background-color: transparent;
@include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); border: 1px solid #f7f8fa;
border: 1px solid #c6cacf; margin-left: 12px;
background-color: #e4e7ed;
}
} }
li { li {
...@@ -501,29 +426,27 @@ pre.light-well { ...@@ -501,29 +426,27 @@ pre.light-well {
.light-well { .light-well {
@include border-radius (2px); @include border-radius (2px);
color: #5b6169 !important; color: #5b6169;
font-size: 13px !important; font-size: 13px;
line-height: 1.6em !important; line-height: 1.6em;
} }
} }
.prepend-top-20 { .prepend-top-20 {
margin: 20px 8px 20px 8px; margin-top: 20px;
.btn-remove { .btn-remove {
@include border-radius (2px); @include btn-middle;
@include btn-remove;
font-size: 13px;
font-weight: 600px;
text-transform: uppercase;
float: left !important; float: left !important;
margin-bottom: 14px;
} }
} }
/* /*
* Projects list rendered on dashboard and user page * Projects list rendered on dashboard and user page
*/ */
.projects-list { .projects-list {
@include basic-list; @include basic-list;
...@@ -581,3 +504,4 @@ pre.light-well { ...@@ -581,3 +504,4 @@ pre.light-well {
.inline-form { .inline-form {
display: inline-block; display: inline-block;
} }
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
= search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control' = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
- if current_user.can_create_project? - if current_user.can_create_project?
%span.input-group-btn %span.input-group-btn
= link_to new_project_path, class: 'btn btn-success' do = link_to new_project_path, class: 'btn btn-green' do
New project New project
= render 'shared/projects/list', projects: @projects = render 'shared/projects/list', projects: @projects
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
= search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control' = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control'
- if can? current_user, :create_projects, @group - if can? current_user, :create_projects, @group
%span.input-group-btn %span.input-group-btn
= link_to new_project_path(namespace_id: @group.id), class: 'btn btn-success' do = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-green' do
New project New project
= render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false
- if current_user - if current_user
%span.dropdown %span.dropdown
%a.dropdown-toggle.btn.btn-new{href: '#', "data-toggle" => "dropdown"} %a.dropdown-new.btn.btn-new{href: '#', "data-toggle" => "dropdown"}
= icon('plus') = icon('plus')
%ul.dropdown-menu.dropdown-menu-right.project-home-dropdown %ul.dropdown-menu.dropdown-menu-right.project-home-dropdown
- if can?(current_user, :create_issue, @project) - if can?(current_user, :create_issue, @project)
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
= hidden_field_tag :notification_id, @membership.id = hidden_field_tag :notification_id, @membership.id
= hidden_field_tag :notification_level = hidden_field_tag :notification_level
%span.dropdown %span.dropdown
%a.dropdown-toggle.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"} %a.dropdown-new.btn.btn-new#notifications-button{href: '#', "data-toggle" => "dropdown"}
= icon('bell') = icon('bell')
= notification_label(@membership) = notification_label(@membership)
= icon('angle-down') = icon('angle-down')
......
- if current_user && can?(current_user, :download_code, @project) .alert_holder
- if current_user && can?(current_user, :download_code, @project)
= render 'shared/no_ssh' = render 'shared/no_ssh'
= render 'shared/no_password' = render 'shared/no_password'
...@@ -15,9 +16,10 @@ ...@@ -15,9 +16,10 @@
file to this project. file to this project.
.prepend-top-20 .prepend-top-20
%h3.page-title .empty_wrapper
%h3.page-title
Command line instructions Command line instructions
%div.git-empty %div.git-empty
%fieldset %fieldset
%h5 Git global setup %h5 Git global setup
%pre.light-well %pre.light-well
...@@ -47,6 +49,6 @@ ...@@ -47,6 +49,6 @@
git commit git commit
git push -u origin master git push -u origin master
- if can? current_user, :remove_project, @project - if can? current_user, :remove_project, @project
.prepend-top-20 .prepend-top-20
= link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right" = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"
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