Add semantic-ui (#8076)
* client: add semantic-ui * add README, disable google fonts * karma: limit coverage to .vue and .js files * add missing deps * semantic-ui in assets folder
This commit is contained in:
Matteo Pagliazzi
@@ -0,0 +1,109 @@
|
||||
This folder contains the Semantic UI theme used on the website.
|
||||
|
||||
To load a Semantic UI element uncomment it from semantic.less.
|
||||
|
||||
The custom theme files are placed under /site.
|
||||
|
||||
For each element there's a .variables file that contains variables that are different for our theme and a .overrides file that contains custom CSS properties.
|
||||
|
||||
More info on theming can be found at http://semantic-ui.com/usage/theming.html.
|
||||
|
||||
The list of files that can be placed under /site is this:
|
||||
|
||||
├── collections
|
||||
│ ├── breadcrumb.overrides
|
||||
│ ├── breadcrumb.variables
|
||||
│ ├── form.overrides
|
||||
│ ├── form.variables
|
||||
│ ├── grid.overrides
|
||||
│ ├── grid.variables
|
||||
│ ├── menu.overrides
|
||||
│ ├── menu.variables
|
||||
│ ├── message.overrides
|
||||
│ ├── message.variables
|
||||
│ ├── table.overrides
|
||||
│ └── table.variables
|
||||
├── elements
|
||||
│ ├── button.overrides
|
||||
│ ├── button.variables
|
||||
│ ├── container.overrides
|
||||
│ ├── container.variables
|
||||
│ ├── divider.overrides
|
||||
│ ├── divider.variables
|
||||
│ ├── flag.overrides
|
||||
│ ├── flag.variables
|
||||
│ ├── header.overrides
|
||||
│ ├── header.variables
|
||||
│ ├── icon.overrides
|
||||
│ ├── icon.variables
|
||||
│ ├── image.overrides
|
||||
│ ├── image.variables
|
||||
│ ├── input.overrides
|
||||
│ ├── input.variables
|
||||
│ ├── label.overrides
|
||||
│ ├── label.variables
|
||||
│ ├── list.overrides
|
||||
│ ├── list.variables
|
||||
│ ├── loader.overrides
|
||||
│ ├── loader.variables
|
||||
│ ├── rail.overrides
|
||||
│ ├── rail.variables
|
||||
│ ├── reveal.overrides
|
||||
│ ├── reveal.variables
|
||||
│ ├── segment.overrides
|
||||
│ ├── segment.variables
|
||||
│ ├── step.overrides
|
||||
│ └── step.variables
|
||||
├── globals
|
||||
│ ├── reset.overrides
|
||||
│ ├── reset.variables
|
||||
│ ├── site.overrides
|
||||
│ └── site.variables
|
||||
├── modules
|
||||
│ ├── accordion.overrides
|
||||
│ ├── accordion.variables
|
||||
│ ├── chatroom.overrides
|
||||
│ ├── chatroom.variables
|
||||
│ ├── checkbox.overrides
|
||||
│ ├── checkbox.variables
|
||||
│ ├── dimmer.overrides
|
||||
│ ├── dimmer.variables
|
||||
│ ├── dropdown.overrides
|
||||
│ ├── dropdown.variables
|
||||
│ ├── embed.overrides
|
||||
│ ├── embed.variables
|
||||
│ ├── modal.overrides
|
||||
│ ├── modal.variables
|
||||
│ ├── nag.overrides
|
||||
│ ├── nag.variables
|
||||
│ ├── popup.overrides
|
||||
│ ├── popup.variables
|
||||
│ ├── progress.overrides
|
||||
│ ├── progress.variables
|
||||
│ ├── rating.overrides
|
||||
│ ├── rating.variables
|
||||
│ ├── search.overrides
|
||||
│ ├── search.variables
|
||||
│ ├── shape.overrides
|
||||
│ ├── shape.variables
|
||||
│ ├── sidebar.overrides
|
||||
│ ├── sidebar.variables
|
||||
│ ├── sticky.overrides
|
||||
│ ├── sticky.variables
|
||||
│ ├── tab.overrides
|
||||
│ ├── tab.variables
|
||||
│ ├── transition.overrides
|
||||
│ └── transition.variables
|
||||
└── views
|
||||
├── ad.overrides
|
||||
├── ad.variables
|
||||
├── card.overrides
|
||||
├── card.variables
|
||||
├── comment.overrides
|
||||
├── comment.variables
|
||||
├── feed.overrides
|
||||
├── feed.variables
|
||||
├── item.overrides
|
||||
├── item.variables
|
||||
├── statistic.overrides
|
||||
└── statistic.variables
|
||||
@@ -0,0 +1,68 @@
|
||||
/*
|
||||
|
||||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
|
||||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║
|
||||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║
|
||||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║
|
||||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║
|
||||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
|
||||
|
||||
Import this file into your LESS project to use Semantic UI without build tools
|
||||
*/
|
||||
|
||||
// Un-comment each module when it gets used
|
||||
|
||||
/* Global */
|
||||
& { @import "~semantic-ui-less/definitions/globals/reset"; }
|
||||
& { @import "~semantic-ui-less/definitions/globals/site"; }
|
||||
|
||||
/* Elements */
|
||||
// & { @import "~semantic-ui-less/definitions/elements/button"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/container"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/divider"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/flag"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/header"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/icon"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/image"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/input"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/label"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/list"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/loader"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/rail"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/reveal"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/segment"; }
|
||||
// & { @import "~semantic-ui-less/definitions/elements/step"; }
|
||||
|
||||
/* Collections */
|
||||
// & { @import "~semantic-ui-less/definitions/collections/breadcrumb"; }
|
||||
// & { @import "~semantic-ui-less/definitions/collections/form"; }
|
||||
& { @import "~semantic-ui-less/definitions/collections/grid"; }
|
||||
// & { @import "~semantic-ui-less/definitions/collections/menu"; }
|
||||
// & { @import "~semantic-ui-less/definitions/collections/message"; }
|
||||
// & { @import "~semantic-ui-less/definitions/collections/table"; }
|
||||
|
||||
/* Views */
|
||||
// & { @import "~semantic-ui-less/definitions/views/ad"; }
|
||||
// & { @import "~semantic-ui-less/definitions/views/card"; }
|
||||
// & { @import "~semantic-ui-less/definitions/views/comment"; }
|
||||
// & { @import "~semantic-ui-less/definitions/views/feed"; }
|
||||
// & { @import "~semantic-ui-less/definitions/views/item"; }
|
||||
// & { @import "~semantic-ui-less/definitions/views/statistic"; }
|
||||
|
||||
/* Modules */
|
||||
// & { @import "~semantic-ui-less/definitions/modules/accordion"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/checkbox"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/dimmer"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/dropdown"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/embed"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/modal"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/nag"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/popup"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/progress"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/rating"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/search"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/shape"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/sidebar"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/sticky"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/tab"; }
|
||||
// & { @import "~semantic-ui-less/definitions/modules/transition"; }
|
||||
@@ -0,0 +1,2 @@
|
||||
// Disable google fonts
|
||||
@importGoogleFonts: false;
|
||||
@@ -0,0 +1,92 @@
|
||||
/*
|
||||
|
||||
████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗
|
||||
╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝
|
||||
██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗
|
||||
██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║
|
||||
██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║
|
||||
╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝
|
||||
|
||||
*/
|
||||
|
||||
/*******************************
|
||||
Theme Selection
|
||||
*******************************/
|
||||
|
||||
/* To override a theme for an individual element
|
||||
specify theme name below
|
||||
*/
|
||||
|
||||
/* Global */
|
||||
@site : 'default';
|
||||
@reset : 'default';
|
||||
|
||||
/* Elements */
|
||||
@button : 'default';
|
||||
@container : 'default';
|
||||
@divider : 'default';
|
||||
@flag : 'default';
|
||||
@header : 'default';
|
||||
@icon : 'default';
|
||||
@image : 'default';
|
||||
@input : 'default';
|
||||
@label : 'default';
|
||||
@list : 'default';
|
||||
@loader : 'default';
|
||||
@rail : 'default';
|
||||
@reveal : 'default';
|
||||
@segment : 'default';
|
||||
@step : 'default';
|
||||
|
||||
/* Collections */
|
||||
@breadcrumb : 'default';
|
||||
@form : 'default';
|
||||
@grid : 'default';
|
||||
@menu : 'default';
|
||||
@message : 'default';
|
||||
@table : 'default';
|
||||
|
||||
/* Modules */
|
||||
@accordion : 'default';
|
||||
@checkbox : 'default';
|
||||
@dimmer : 'default';
|
||||
@dropdown : 'default';
|
||||
@embed : 'default';
|
||||
@modal : 'default';
|
||||
@nag : 'default';
|
||||
@popup : 'default';
|
||||
@progress : 'default';
|
||||
@rating : 'default';
|
||||
@search : 'default';
|
||||
@shape : 'default';
|
||||
@sidebar : 'default';
|
||||
@sticky : 'default';
|
||||
@tab : 'default';
|
||||
@transition : 'default';
|
||||
|
||||
/* Views */
|
||||
@ad : 'default';
|
||||
@card : 'default';
|
||||
@comment : 'default';
|
||||
@feed : 'default';
|
||||
@item : 'default';
|
||||
@statistic : 'default';
|
||||
|
||||
/*******************************
|
||||
Folders
|
||||
*******************************/
|
||||
|
||||
/* Path to theme packages */
|
||||
@themesFolder : 'themes';
|
||||
|
||||
/* Path to site override folder */
|
||||
@siteFolder : '../../website/client/semantic-ui/site';
|
||||
|
||||
|
||||
/*******************************
|
||||
Import Theme
|
||||
*******************************/
|
||||
|
||||
@import "~semantic-ui-less/theme.less";
|
||||
|
||||
/* End Config */
|
||||
@@ -1,5 +1,5 @@
|
||||
<template lang="pug">
|
||||
#app
|
||||
#app.ui.fluid.container
|
||||
site-header
|
||||
p Welcome back {{user.profile.name}}!
|
||||
ul
|
||||
@@ -23,29 +23,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
<style lang="less">
|
||||
@import '../assets/semantic-ui/semantic.less';
|
||||
|
||||
// Element is rendered outside of Vue because it cannot wait for JS to be loaded
|
||||
// Placing CSS here so it benefits from pre-processing
|
||||
#loading-screen {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#loading-screen { /* outside Vue because can't wait for rendering to finish */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
border-left : 1px solid;
|
||||
border-right: 1px solid;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- #loading-screen needs to be rendered before vue, will be deleted once app is loaded -->
|
||||
<div id="loading-screen">Loading...</div>
|
||||
<div id="loading-screen" class="ui middle aligned one column grid">
|
||||
<div class="column center aligned">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user