Use vendored semantic UI CSS and JS

This commit is contained in:
Eliot Berriot 2018-12-19 22:04:35 +01:00
parent ba68246e0d
commit 7c671177a8
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
15 changed files with 484 additions and 40401 deletions

View File

@ -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",

View File

@ -222,181 +222,5 @@ export default {
</script>
<style lang="scss">
// 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 "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;
}
@import "style/_main";
</style>

View File

@ -22,12 +22,9 @@ import globals from '@/components/globals' // eslint-disable-line
sync(store, router)
window.$ = window.jQuery = require('jquery')
// 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('./semantic.js')
require('masonry-layout')
let availableLanguages = (function () {
let l = {}
locales.locales.forEach(c => {

24
front/src/semantic.js Normal file
View File

@ -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')

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 957 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

250
front/src/style/_main.scss Normal file
View File

@ -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;
}

202
front/src/style/_site.scss Normal file
View File

@ -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
*******************************/

View File

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