From fd681ee5b688388b2d202816330e03cf688e6f96 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 17 Apr 2017 11:55:16 -0400 Subject: Update variable table styles at wider viewport. --- app/assets/stylesheets/pages/projects.scss | 8 ++++++-- app/views/projects/variables/_table.html.haml | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 717ebb44a23..042d25ee064 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -937,20 +937,24 @@ pre.light-well { // override bootstrap white-space: normal!important; - @media (max-width: $screen-sm-max) { + @media (max-width: $screen-md-max) { width: 150px; max-width: 150px; } } .variable-value { - @media(max-width: $screen-xs-max) { + @media(max-width: $screen-sm-max) { width: 150px; max-width: 150px; overflow: hidden; word-wrap: break-word; } } + + .variable-menu { + text-align: right; + } } .services-installation-info .row { diff --git a/app/views/projects/variables/_table.html.haml b/app/views/projects/variables/_table.html.haml index c7cebf45160..0ce597dcf21 100644 --- a/app/views/projects/variables/_table.html.haml +++ b/app/views/projects/variables/_table.html.haml @@ -14,7 +14,7 @@ %tr %td.variable-key= variable.key %td.variable-value{ "data-value" => variable.value }****** - %td + %td.variable-menu = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do %span.sr-only Update -- cgit v1.2.1 From 29517307ddc936ab30aadf107de56373fc9f2354 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 17 Apr 2017 12:26:20 -0400 Subject: Remove breakpoints, use fixed widths. --- app/assets/stylesheets/pages/projects.scss | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 042d25ee064..4cf5a3f7b8d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -929,27 +929,20 @@ pre.light-well { } .variable-key { - width: 300px; - max-width: 300px; + width: 120px; + max-width: 120px; overflow: hidden; word-wrap: break-word; // override bootstrap white-space: normal!important; - - @media (max-width: $screen-md-max) { - width: 150px; - max-width: 150px; - } } .variable-value { - @media(max-width: $screen-sm-max) { - width: 150px; - max-width: 150px; - overflow: hidden; - word-wrap: break-word; - } + width: 150px; + max-width: 150px; + overflow: hidden; + word-wrap: break-word; } .variable-menu { -- cgit v1.2.1 From 41f018516aba0140cb3a1acd2a0ad461737ad9d7 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 17 Apr 2017 12:54:31 -0400 Subject: Use ellipsis and nowrap. --- app/assets/stylesheets/pages/projects.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 4cf5a3f7b8d..742ca10944c 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -929,20 +929,24 @@ pre.light-well { } .variable-key { - width: 120px; - max-width: 120px; + /* 45px is not the actual maximum width. The + browser uses it to calculate cell width relative + to variable-value and variable-menu */ + max-width: 45px; + // This is the actual min-width, makes a difference only on small screens + min-width: 100px; overflow: hidden; word-wrap: break-word; - - // override bootstrap - white-space: normal!important; + white-space: nowrap; + text-overflow: ellipsis; } .variable-value { - width: 150px; max-width: 150px; overflow: hidden; word-wrap: break-word; + white-space: nowrap; + text-overflow: ellipsis; } .variable-menu { -- cgit v1.2.1 From 397b3ac590d342677a4352c3733a3c1b6ee3ee2d Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 17 Apr 2017 16:58:31 +0000 Subject: Fix comment length and syntax. --- app/assets/stylesheets/pages/projects.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 742ca10944c..f09981be448 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -929,11 +929,10 @@ pre.light-well { } .variable-key { - /* 45px is not the actual maximum width. The - browser uses it to calculate cell width relative - to variable-value and variable-menu */ + // Not the actual maximum width. Used to calculate cell width relative + // to variable-value and variable-menu max-width: 45px; - // This is the actual min-width, makes a difference only on small screens + // Is the actual min-width, makes a difference only on small screens min-width: 100px; overflow: hidden; word-wrap: break-word; -- cgit v1.2.1 From 131c62ef839128d0098128e31a0fc709959ecf53 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 17 Apr 2017 13:06:21 -0400 Subject: Remove unneeded min-width. --- app/assets/stylesheets/pages/projects.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 742ca10944c..a9e2a034790 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -929,12 +929,7 @@ pre.light-well { } .variable-key { - /* 45px is not the actual maximum width. The - browser uses it to calculate cell width relative - to variable-value and variable-menu */ - max-width: 45px; - // This is the actual min-width, makes a difference only on small screens - min-width: 100px; + max-width: 120px; overflow: hidden; word-wrap: break-word; white-space: nowrap; -- cgit v1.2.1