Use vendored semantic UI CSS and JS

front/package.json

@@ -21,7 +21,7 @@
     "masonry-layout": "^4.2.2",
     "moment": "^2.22.2",
     "raven-js": "^3.26.4",
-    "semantic-ui-css": "^2.3.3",
+    "semantic-ui-css": "^2.4.1",
     "showdown": "^1.8.6",
     "vue": "^2.5.17",
     "vue-gettext": "^2.1.0",

front/src/App.vue

@@ -222,181 +222,5 @@ export default {
 </script>
 
 <style lang="scss">
-// we do the import here instead in main.js
+@import "style/_main";
-// as resolve order is not deterministric in webpack
-// and we end up with CSS rules not applied,
-// see https://github.com/webpack/webpack/issues/215
-@import "semantic/semantic.css";
-@import "style/vendor/media";
-
-html,
-body {
-  @include media("<desktop") {
-    font-size: 90%;
-  }
-}
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.instance-chooser {
-  margin-top: 2em;
-}
-
-.main.pusher,
-.footer {
-  @include media(">desktop") {
-    margin-left: 350px !important;
-    margin-top: 50px;
-  }
-  transform: none !important;
-}
-
-.main.pusher > .ui.secondary.menu {
-  margin-left: 0;
-  margin-right: 0;
-  border: none;
-  box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
-  .ui.item {
-    border: none;
-    border-bottom-style: none;
-    margin-bottom: 0px;
-    &.active {
-      box-shadow: inset 0px -2px 0px 0px #000;
-    }
-  }
-  @include media(">tablet") {
-    padding: 0 2.5rem;
-  }
-  @include media(">desktop") {
-    position: fixed;
-    left: 350px;
-    right: 0px;
-    top: 0px;
-    z-index: 99;
-  }
-  background-color: white;
-  .item {
-    padding-top: 1.5em;
-    padding-bottom: 1.5em;
-  }
-}
-
-.service-messages {
-  position: fixed;
-  bottom: 1em;
-  left: 1em;
-  @include media(">desktop") {
-    left: 350px;
-  }
-}
-.main-pusher {
-  padding: 1.5rem 0;
-}
-.ui.stripe.segment,
-#footer {
-  padding: 2em;
-  @include media(">tablet") {
-    padding: 4em;
-  }
-}
-
-.ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.ui.small.text.container {
-  max-width: 500px !important;
-}
-
-.button.icon.tiny {
-  padding: 0.5em !important;
-}
-
-.sidebar {
-  .logo {
-    path {
-      fill: white;
-    }
-  }
-}
-
-.discrete {
-  color: rgba(0, 0, 0, 0.87);
-}
-.link {
-  cursor: pointer;
-}
-
-.ui.really.basic.button {
-  &:not(:focus) {
-    box-shadow: none !important;
-    background-color: none !important;
-  }
-}
-
-.floated.buttons .button ~ .dropdown {
-  border-left: none;
-}
-
-.ui.icon.header .circular.icon {
-  display: flex;
-  justify-content: center;
-}
-
-.segment-content .button {
-  margin: 0.5em;
-}
-
-a {
-  cursor: pointer;
-}
-.segment.hidden {
-  display: none;
-}
-
-button.reset {
-  border: none;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-
-  background: transparent;
-
-  /* inherit font & color from ancestor */
-  color: inherit;
-  font: inherit;
-
-  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-  line-height: normal;
-
-  /* Corrects font smoothing for webkit */
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  /* Corrects inability to style clickable `input` types in iOS */
-  -webkit-appearance: none;
-  text-align: inherit;
-}
-
-.ui.table > caption {
-  font-weight: bold;
-  padding: 0.5em;
-  text-align: left;
-}
-[role="button"] {
-  cursor: pointer;
-}
-
-.left.floated {
-  float: left;
-}
-
-.right.floated {
-  float: right;
-}
 </style>

front/src/main.js

@@ -22,12 +22,9 @@ import globals from '@/components/globals' // eslint-disable-line
 sync(store, router)
 
 window.$ = window.jQuery = require('jquery')
-
+require('./semantic.js')
-// this is absolutely dirty but at the moment, semantic UI does not
-// play really nice with webpack and I want to get rid of Google Fonts
-// require('./semantic/semantic.css')
-require('semantic-ui-css/semantic.js')
 require('masonry-layout')
+
 let availableLanguages = (function () {
   let l = {}
   locales.locales.forEach(c => {

front/src/semantic.js

@@ -0,0 +1,24 @@
+require('semantic-ui-css/components/accordion.min.js')
+require('semantic-ui-css/components/api.min.js')
+require('semantic-ui-css/components/checkbox.min.js')
+require('semantic-ui-css/components/colorize.min.js')
+require('semantic-ui-css/components/dimmer.min.js')
+require('semantic-ui-css/components/dropdown.min.js')
+require('semantic-ui-css/components/embed.min.js')
+require('semantic-ui-css/components/form.min.js')
+require('semantic-ui-css/components/modal.min.js')
+require('semantic-ui-css/components/nag.min.js')
+require('semantic-ui-css/components/popup.min.js')
+require('semantic-ui-css/components/progress.min.js')
+require('semantic-ui-css/components/rating.min.js')
+require('semantic-ui-css/components/search.min.js')
+require('semantic-ui-css/components/shape.min.js')
+require('semantic-ui-css/components/sidebar.min.js')
+require('semantic-ui-css/components/site.min.js')
+require('semantic-ui-css/components/state.min.js')
+require('semantic-ui-css/components/sticky.min.js')
+require('semantic-ui-css/components/tab.min.js')
+require('semantic-ui-css/components/transition.min.js')
+require('semantic-ui-css/components/video.min.js')
+require('semantic-ui-css/components/visibility.min.js')
+require('semantic-ui-css/components/visit.min.js')

front/src/style/_main.scss

@@ -0,0 +1,250 @@
+/*
+
+███████╗███████╗███╗   ███╗ █████╗ ███╗   ██╗████████╗██╗ ██████╗    ██╗   ██╗██╗
+██╔════╝██╔════╝████╗ ████║██╔══██╗████╗  ██║╚══██╔══╝██║██╔════╝    ██║   ██║██║
+███████╗█████╗  ██╔████╔██║███████║██╔██╗ ██║   ██║   ██║██║         ██║   ██║██║
+╚════██║██╔══╝  ██║╚██╔╝██║██╔══██║██║╚██╗██║   ██║   ██║██║         ██║   ██║██║
+███████║███████╗██║ ╚═╝ ██║██║  ██║██║ ╚████║   ██║   ██║╚██████╗    ╚██████╔╝██║
+╚══════╝╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚═╝ ╚═════╝     ╚═════╝ ╚═╝
+
+  Import this file into your LESS project to use Semantic UI without build tools
+*/
+
+/* Global */
+@import "~semantic-ui-css/components/reset.css";
+// we use our custom site css here to avoid loading google font
+@import "./site";
+
+/* Elements */
+@import "~semantic-ui-css/components/button.css";
+@import "~semantic-ui-css/components/container.css";
+@import "~semantic-ui-css/components/divider.css";
+@import "~semantic-ui-css/components/flag.css";
+@import "~semantic-ui-css/components/header.css";
+@import "~semantic-ui-css/components/icon.css";
+@import "~semantic-ui-css/components/image.css";
+@import "~semantic-ui-css/components/input.css";
+@import "~semantic-ui-css/components/label.css";
+@import "~semantic-ui-css/components/list.css";
+@import "~semantic-ui-css/components/loader.css";
+@import "~semantic-ui-css/components/placeholder.css";
+@import "~semantic-ui-css/components/rail.css";
+@import "~semantic-ui-css/components/reveal.css";
+@import "~semantic-ui-css/components/segment.css";
+@import "~semantic-ui-css/components/step.css";
+
+/* Collections */
+@import "~semantic-ui-css/components/breadcrumb.css";
+@import "~semantic-ui-css/components/form.css";
+@import "~semantic-ui-css/components/grid.css";
+@import "~semantic-ui-css/components/menu.css";
+@import "~semantic-ui-css/components/message.css";
+@import "~semantic-ui-css/components/table.css";
+
+/* Views */
+@import "~semantic-ui-css/components/ad.css";
+@import "~semantic-ui-css/components/card.css";
+@import "~semantic-ui-css/components/comment.css";
+@import "~semantic-ui-css/components/feed.css";
+@import "~semantic-ui-css/components/item.css";
+@import "~semantic-ui-css/components/statistic.css";
+
+/* Modules */
+@import "~semantic-ui-css/components/accordion.css";
+@import "~semantic-ui-css/components/checkbox.css";
+@import "~semantic-ui-css/components/dimmer.css";
+@import "~semantic-ui-css/components/dropdown.css";
+@import "~semantic-ui-css/components/embed.css";
+@import "~semantic-ui-css/components/modal.css";
+@import "~semantic-ui-css/components/nag.css";
+@import "~semantic-ui-css/components/popup.css";
+@import "~semantic-ui-css/components/progress.css";
+@import "~semantic-ui-css/components/rating.css";
+@import "~semantic-ui-css/components/search.css";
+@import "~semantic-ui-css/components/shape.css";
+@import "~semantic-ui-css/components/sidebar.css";
+@import "~semantic-ui-css/components/sticky.css";
+@import "~semantic-ui-css/components/tab.css";
+@import "~semantic-ui-css/components/transition.css";
+
+
+
+// we do the import here instead in main.js
+// as resolve order is not deterministric in webpack
+// and we end up with CSS rules not applied,
+// see https://github.com/webpack/webpack/issues/215
+@import "./vendor/media";
+
+html,
+body {
+  @include media("<desktop") {
+    font-size: 90%;
+  }
+}
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.instance-chooser {
+  margin-top: 2em;
+}
+
+.main.pusher,
+.footer {
+  @include media(">desktop") {
+    margin-left: 350px !important;
+    margin-top: 50px;
+  }
+  transform: none !important;
+}
+
+.main.pusher > .ui.secondary.menu {
+  margin-left: 0;
+  margin-right: 0;
+  border: none;
+  box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
+  .ui.item {
+    border: none;
+    border-bottom-style: none;
+    margin-bottom: 0px;
+    &.active {
+      box-shadow: inset 0px -2px 0px 0px #000;
+    }
+  }
+  @include media(">tablet") {
+    padding: 0 2.5rem;
+  }
+  @include media(">desktop") {
+    position: fixed;
+    left: 350px;
+    right: 0px;
+    top: 0px;
+    z-index: 99;
+  }
+  background-color: white;
+  .item {
+    padding-top: 1.5em;
+    padding-bottom: 1.5em;
+  }
+}
+
+.service-messages {
+  position: fixed;
+  bottom: 1em;
+  left: 1em;
+  @include media(">desktop") {
+    left: 350px;
+  }
+}
+.main-pusher {
+  padding: 1.5rem 0;
+}
+.ui.stripe.segment,
+#footer {
+  padding: 2em;
+  @include media(">tablet") {
+    padding: 4em;
+  }
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ui.small.text.container {
+  max-width: 500px !important;
+}
+
+.button.icon.tiny {
+  padding: 0.5em !important;
+}
+
+.sidebar {
+  .logo {
+    &.bordered.icon {
+      padding: .5em .41em !important;
+    }
+    path {
+      fill: white;
+    }
+  }
+}
+
+.discrete {
+  color: rgba(0, 0, 0, 0.87);
+}
+.link {
+  cursor: pointer;
+}
+
+.ui.really.basic.button {
+  &:not(:focus) {
+    box-shadow: none !important;
+    background-color: none !important;
+  }
+}
+
+.floated.buttons .button ~ .dropdown {
+  border-left: none;
+}
+
+.ui.icon.header .circular.icon {
+  display: flex;
+  justify-content: center;
+}
+
+.segment-content .button {
+  margin: 0.5em;
+}
+
+a {
+  cursor: pointer;
+}
+.segment.hidden {
+  display: none;
+}
+
+button.reset {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  /* Corrects inability to style clickable `input` types in iOS */
+  -webkit-appearance: none;
+  text-align: inherit;
+}
+
+.ui.table > caption {
+  font-weight: bold;
+  padding: 0.5em;
+  text-align: left;
+}
+[role="button"] {
+  cursor: pointer;
+}
+
+.left.floated {
+  float: left;
+}
+
+.right.floated {
+  float: right;
+}

front/src/style/_site.scss

@@ -0,0 +1,202 @@
+/*!
+ * # Semantic UI 2.4.1 - Site
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+             Page
+*******************************/
+
+html,
+body {
+  height: 100%;
+}
+html {
+  font-size: 14px;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+  overflow-x: hidden;
+  min-width: 320px;
+  background: #FFFFFF;
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 1.4285em;
+  color: rgba(0, 0, 0, 0.87);
+  font-smoothing: antialiased;
+}
+
+
+/*******************************
+             Headers
+*******************************/
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  line-height: 1.28571429em;
+  margin: calc(2rem -  0.14285714em ) 0em 1rem;
+  font-weight: bold;
+  padding: 0em;
+}
+h1 {
+  min-height: 1rem;
+  font-size: 2rem;
+}
+h2 {
+  font-size: 1.71428571rem;
+}
+h3 {
+  font-size: 1.28571429rem;
+}
+h4 {
+  font-size: 1.07142857rem;
+}
+h5 {
+  font-size: 1rem;
+}
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child {
+  margin-top: 0em;
+}
+h1:last-child,
+h2:last-child,
+h3:last-child,
+h4:last-child,
+h5:last-child {
+  margin-bottom: 0em;
+}
+
+
+/*******************************
+             Text
+*******************************/
+
+p {
+  margin: 0em 0em 1em;
+  line-height: 1.4285em;
+}
+p:first-child {
+  margin-top: 0em;
+}
+p:last-child {
+  margin-bottom: 0em;
+}
+
+/*-------------------
+        Links
+--------------------*/
+
+a {
+  color: #4183C4;
+  text-decoration: none;
+}
+a:hover {
+  color: #1e70bf;
+  text-decoration: none;
+}
+
+
+/*******************************
+         Scrollbars
+*******************************/
+
+
+
+/*******************************
+          Highlighting
+*******************************/
+
+
+/* Site */
+::-webkit-selection {
+  background-color: #CCE2FF;
+  color: rgba(0, 0, 0, 0.87);
+}
+::-moz-selection {
+  background-color: #CCE2FF;
+  color: rgba(0, 0, 0, 0.87);
+}
+::selection {
+  background-color: #CCE2FF;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Form */
+textarea::-webkit-selection,
+input::-webkit-selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
+textarea::-moz-selection,
+input::-moz-selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
+textarea::selection,
+input::selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Force Simple Scrollbars */
+body ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 10px;
+  height: 10px;
+}
+body ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 0px;
+}
+body ::-webkit-scrollbar-thumb {
+  cursor: pointer;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.25);
+  -webkit-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+}
+body ::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(0, 0, 0, 0.15);
+}
+body ::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 135, 139, 0.8);
+}
+
+/* Inverted UI */
+body .ui.inverted::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+body .ui.inverted::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.25);
+}
+body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(255, 255, 255, 0.15);
+}
+body .ui.inverted::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+
+/*******************************
+        Global Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/

front/yarn.lock

@@ -6725,9 +6725,10 @@ selfsigned@^1.9.1:
   dependencies:
     node-forge "0.7.5"
 
-semantic-ui-css@^2.3.3:
+semantic-ui-css@^2.4.1:
-  version "2.3.3"
+  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.3.3.tgz#134794cde03344092f2728ff61bf9203cf172834"
+  resolved "https://registry.yarnpkg.com/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz#f5aea39fafb787cbd905ec724272a3f9cba9004a"
+  integrity sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==
   dependencies:
     jquery x.*