From 4eb08770b7517a03ac93778c75504a0cd26973c3 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 18 Apr 2019 18:07:13 +0200
Subject: [PATCH 1/2] centered button icons on mobile view when if text should
 not be displayed

---
 .../ui-components/src/repos/DiffFile.js       | 28 +++++++++++++------
 .../repos/changesets/ChangesetButtonGroup.js  | 12 +++-----
 .../branches/components/BranchButtonGroup.js  | 12 +++-----
 .../components/content/FileButtonGroup.js     | 26 +++++++++--------
 scm-ui/styles/scm.scss                        | 19 +++++++++++++
 5 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/repos/DiffFile.js b/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
index 64450659f0..ac815511ba 100644
--- a/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
+++ b/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
@@ -11,7 +11,7 @@ import {
 import injectSheets from "react-jss";
 import classNames from "classnames";
 import { translate } from "react-i18next";
-import {Button} from "../buttons";
+import { Button } from "../buttons";
 
 const styles = {
   panel: {
@@ -181,11 +181,17 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
 
-    const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
-    return <div className={classNames("panel", classes.panel)}>
+    const fileControls = fileControlFactory
+      ? fileControlFactory(file, this.setCollapse)
+      : null;
+    return (
+      <div className={classNames("panel", classes.panel)}>
         <div className="panel-heading">
           <div className="level">
-            <div className={classNames("level-left", classes.titleHeader)} onClick={this.toggleCollapse}>
+            <div
+              className={classNames("level-left", classes.titleHeader)}
+              onClick={this.toggleCollapse}
+            >
               <i className={icon} />
               <span className={classes.title}>
                 {this.renderFileTitle(file)}
@@ -195,11 +201,16 @@ class DiffFile extends React.Component<Props, State> {
               </span>
             </div>
             <div className="level-right">
-              <Button action={this.toggleSideBySide}>
+              <Button action={this.toggleSideBySide} className="reduced-mobile">
                 <span className="icon is-small">
-                  <i className={classNames("fas", sideBySide ? "fa-align-left" : "fa-columns")} />
+                  <i
+                    className={classNames(
+                      "fas",
+                      sideBySide ? "fa-align-left" : "fa-columns"
+                    )}
+                  />
                 </span>
-                <span className="is-hidden-mobile">
+                <span>
                   {t(sideBySide ? "diff.combined" : "diff.sideBySide")}
                 </span>
               </Button>
@@ -208,7 +219,8 @@ class DiffFile extends React.Component<Props, State> {
           </div>
         </div>
         {body}
-      </div>;
+      </div>
+    );
   }
 }
 
diff --git a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
index 04df747c1a..ba7320b152 100644
--- a/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
+++ b/scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
@@ -23,21 +23,17 @@ class ChangesetButtonGroup extends React.Component<Props> {
 
     return (
       <ButtonGroup className="is-pulled-right">
-        <Button link={changesetLink}>
+        <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
-            {t("changeset.buttons.details")}
-          </span>
+          <span>{t("changeset.buttons.details")}</span>
         </Button>
-        <Button link={sourcesLink}>
+        <Button link={sourcesLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-code" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
-            {t("changeset.buttons.sources")}
-          </span>
+          <span>{t("changeset.buttons.sources")}</span>
         </Button>
       </ButtonGroup>
     );
diff --git a/scm-ui/src/repos/branches/components/BranchButtonGroup.js b/scm-ui/src/repos/branches/components/BranchButtonGroup.js
index 424d4fd156..37b2818070 100644
--- a/scm-ui/src/repos/branches/components/BranchButtonGroup.js
+++ b/scm-ui/src/repos/branches/components/BranchButtonGroup.js
@@ -25,21 +25,17 @@ class BranchButtonGroup extends React.Component<Props> {
 
     return (
       <ButtonGroup>
-        <Button link={changesetLink}>
+        <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
-            {t("branch.commits")}
-          </span>
+          <span>{t("branch.commits")}</span>
         </Button>
-        <Button link={sourcesLink}>
+        <Button link={sourcesLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-code" />
           </span>
-          <span className="is-hidden-mobile is-hidden-tablet-only">
-            {t("branch.sources")}
-          </span>
+          <span>{t("branch.sources")}</span>
         </Button>
       </ButtonGroup>
     );
diff --git a/scm-ui/src/repos/sources/components/content/FileButtonGroup.js b/scm-ui/src/repos/sources/components/content/FileButtonGroup.js
index 6318425711..06f4d0ad01 100644
--- a/scm-ui/src/repos/sources/components/content/FileButtonGroup.js
+++ b/scm-ui/src/repos/sources/components/content/FileButtonGroup.js
@@ -27,22 +27,26 @@ class FileButtonGroup extends React.Component<Props> {
 
     return (
       <ButtonGroup>
-        <Button action={this.showSources} color={ this.color(!historyIsSelected) }>
+        <Button
+          action={this.showSources}
+          className="reduced-mobile"
+          color={this.color(!historyIsSelected)}
+        >
           <span className="icon">
-            <i className="fas fa-code"/>
-          </span>
-            <span className="is-hidden-mobile">
-            {t("sources.content.sourcesButton")}
+            <i className="fas fa-code" />
           </span>
+          <span>{t("sources.content.sourcesButton")}</span>
         </Button>
-        <Button action={this.showHistory} color={ this.color(historyIsSelected) }>
+        <Button
+          action={this.showHistory}
+          className="reduced-mobile"
+          color={this.color(historyIsSelected)}
+        >
           <span className="icon">
-            <i className="fas fa-history"/>
+            <i className="fas fa-history" />
           </span>
-            <span className="is-hidden-mobile">
-            {t("sources.content.historyButton")}
-          </span>
-          </Button>
+          <span>{t("sources.content.historyButton")}</span>
+        </Button>
       </ButtonGroup>
     );
   }
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 5e7a38ac2b..7145a0cc45 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -111,6 +111,25 @@ $fa-font-path: "webfonts";
   &.is-primary[disabled] {
     background-color: #40dde7;
   }
+  &.reduced-mobile {
+    @media screen and (max-width: 1087px) {
+      > span:nth-child(2) {
+        display: none;
+      }
+    }
+    @media screen and (max-width: 1087px) and (min-width: 769px) {
+      // simultaneously with left margin of Bulma
+      > .icon:first-child:not(:last-child) {
+        margin: 0;
+      }
+    }
+    @media screen and (max-width: 768px) {
+      // simultaneously with left margin of Bulma
+      .icon:first-child:not(:last-child) {
+        margin-right: calc(-0.375em - 1px);
+      }
+    }
+  }
 }
 
 // multiline Columns

From 74e91f9454eecf7d902da317bb8e473dc6128b6d Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Thu, 25 Apr 2019 07:16:26 +0000
Subject: [PATCH 2/2] Close branch feature/css_reduced_mobile_buttons