diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-07-31 19:33:10 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-07-31 19:33:10 +0300 |
commit | cb127785e08c37fd1f5e0dd11ca2327930fa443a (patch) | |
tree | a75badec00f109cffc243f6d720476c2439576ee /app | |
parent | 51b418b503d30fdf51808cac1ab67ec7ae168388 (diff) |
Adds CSS for desktop and mobile
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/commons/bootstrap.js | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 108 | ||||
-rw-r--r-- | app/views/projects/_project_templates.html.haml | 20 | ||||
-rw-r--r-- | app/views/projects/new.html.haml | 6 |
4 files changed, 118 insertions, 17 deletions
diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js index 36bfe457be9..607d3d88df0 100644 --- a/app/assets/javascripts/commons/bootstrap.js +++ b/app/assets/javascripts/commons/bootstrap.js @@ -3,6 +3,7 @@ import $ from 'jquery'; // bootstrap jQuery plugins import 'bootstrap-sass/assets/javascripts/bootstrap/affix'; import 'bootstrap-sass/assets/javascripts/bootstrap/alert'; +import 'bootstrap-sass/assets/javascripts/bootstrap/button'; import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown'; import 'bootstrap-sass/assets/javascripts/bootstrap/modal'; import 'bootstrap-sass/assets/javascripts/bootstrap/tab'; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 512f6b838ae..d870d8dda38 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -456,6 +456,7 @@ a.deploy-project-label { } } +.project-template, .project-import { .form-group { margin-bottom: 5px; @@ -470,7 +471,7 @@ a.deploy-project-label { .btn { padding: 8px; - margin-left: 10px; + margin-right: 10px; } > div { @@ -482,23 +483,112 @@ a.deploy-project-label { .project-template { .project-templates-buttons { - i { + i, + img { display: block; + height: 24px; font-size: 24px; - margin-bottom: 4px; + margin: 4px auto; } - img { - display: block; - height: 24px; - margin: 0 auto 4px; + @media (max-width: $screen-md-max) { + i, + img { + display: inline-block; + height: 20px; + font-size: 14px; + margin: 0; + } } } + &:after { + content: "OR"; + position: absolute; + color: $gray-darkest; + right: 13px; + z-index: 2; + top: 78px; + } + + @media (max-width: $screen-md-max) { &:after { - content: "OR"; - float: right; + top: 100%; + left: 49%; + margin-top: 10px; + } + } + + @media (max-width: $screen-xs-min) { + &:after { + top: 100%; + left: 46%; + margin-top: 10px; + } + } + + @media (min-width: $screen-xs-max) and (max-width: $screen-md-max) { + &:after { + top: 100%; + left: 49%; + margin-top: 10px; } + } + +} + +.new-project-first-column { + &:after { + background: $white-light; + content: " "; + position: absolute; + top: 66%; + height: 40px; + width: 20px; + right: 7px; + z-index: 1; + } + + @media (min-width: $screen-xs-max) and (max-width: $screen-md-max) { + margin-bottom: 40px; + &:after { + top: 100%; + left: 47%; + width: 50px; + } + } + + @media (max-width: $screen-xs-max) { + margin-bottom: 40px; + + &:after { + top: 100%; + left: 42%; + width: 50px; + } + } +} + +.new-project-second-column { + &:before { + background: $gray-darkest; + width: 1px; + height: 100%; + position: absolute; + left: -23px; + display: inline-block; + content: " "; + } + + @media (max-width: $screen-md-max) { + &:before { + height: 1px; + left: 15px; + top: -20px; + right: 15px; + width: auto; + } + } } .project-stats { diff --git a/app/views/projects/_project_templates.html.haml b/app/views/projects/_project_templates.html.haml index 31438040ff3..8a3b5290f83 100644 --- a/app/views/projects/_project_templates.html.haml +++ b/app/views/projects/_project_templates.html.haml @@ -1,14 +1,24 @@ -.btn-group.project-templates-buttons{ data: { toggle: "buttons" }} - %label.btn.active - %input{ type: "radio", autocomplete: "off", name: "project_templates" } +.project-templates-buttons.import-buttons{ data: { toggle: "buttons" }} + %div.btn.btn-default.active + %input{ type: "radio", autocomplete: "off", name: "project_templates", id: "blank", checked: "true" } = icon('file-o') Blank - Gitlab::ProjectTemplate.all.each do |template| -# The title should be the value posted to the controller, a pretty name to print would be -# template.name - %label.btn - %input{ type: "radio", autocomplete: "off", name: "project_templates" } + %div.btn + %input{ type: "radio", autocomplete: "off", name: "project_templates", id: template.name } = image_tag(template.logo_path) = template.title + %div.btn.btn-default + %input{ type: "radio", autocomplete: "off", name: "project_templates", id: "blank" } + = icon('file-o') + Node Express + + + %div.btn.btn-default + %input{ type: "radio", autocomplete: "off", name: "project_templates", id: "blank"} + = icon('file-o') + Java Spring diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml index 52041f5e38f..50013ee53b5 100644 --- a/app/views/projects/new.html.haml +++ b/app/views/projects/new.html.haml @@ -18,15 +18,15 @@ .col-lg-9.js-toggle-container = form_for @project, html: { class: 'new_project' } do |f| .row - .col-lg-6.col-sm-12 + .col-lg-6.col-sm-12.new-project-first-column .project-template .form_group.clearfix = f.label :template_project, class: 'label-light' do Create from template = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: "What's included in a template?" }, title: "What's included in a template?", class: 'has-tooltip', data: { placement: 'top'} - .col-sm-12.import-buttons + %div = render 'project_templates', f: f - .col-lg-6.col-sm-12 + .col-lg-6.col-sm-12.new-project-second-column - if import_sources_enabled? .project-import .form-group.clearfix |