diff --git a/README.md b/README.md
index da971e10ec74ab8ec2236c57f303636fba2a7118..295763ab75d4f206964294826dbae347485cb5e9 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,6 @@ On `config.json`:
"users": "http://server.url/users/"
},
"post": {
- "users": "http://server.url/users/",
"uploads": "http://server.url/upload/"
}
}
diff --git a/package.json b/package.json
index 91443f699ccaa0bc4f32c60199c38f535deb2ca6..302ee0f39162288760eca2d4f056488265b0a88a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"prebuild": "rimraf build",
"build": "NODE_ENV='production' node internal/parcel.js",
"watch": "rimraf build && node internal/parcel.js",
+ "integration": "rimraf build && parcel src/hubl-framework.html",
"cypress:open": "cypress open",
"cypress:verify": "cypress verify",
"cypress:info": "cypress info",
diff --git a/src/interactions.html b/src/hubl-framework.html
similarity index 90%
rename from src/interactions.html
rename to src/hubl-framework.html
index f2ec73fcbbe9e1ff017a93f43a43a140ea69bed5..9ca3f52eeb67507914dde9719992275e1575ca6a 100644
--- a/src/interactions.html
+++ b/src/hubl-framework.html
@@ -3,26 +3,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Interaction</title>
- <link rel="stylesheet" href="/styles/index.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
+ <title>Hubl Styling Framework</title>
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
+ <link rel="stylesheet" href="styles/hubl-framework/_index.scss">
</head>
<body>
<p>Avatars</p>
<div class="avatar xsmall">
- <object type="image/svg+xml" data="/images/alien.svg"></object>
+ <object type="image/svg+xml" data="images/alien.svg"></object>
</div>
<div class="avatar small">
- <object type="image/svg+xml" data="/images/alien.svg"></object>
+ <object type="image/svg+xml" data="images/alien.svg"></object>
</div>
<div class="avatar">
- <object type="image/svg+xml" data="/images/alien.svg"></object>
+ <object type="image/svg+xml" data="images/alien.svg"></object>
</div>
<div class="avatar large">
- <object type="image/svg+xml" data="/images/alien.svg"></object>
+ <object type="image/svg+xml" data="images/alien.svg"></object>
</div>
<div class="avatar xlarge">
- <object type="image/svg+xml" data="/images/alien.svg"></object>
+ <object type="image/svg+xml" data="images/alien.svg"></object>
</div>
<p>Badges</p>
@@ -111,7 +112,7 @@
<p>Tables</p>
<div class="table-wrapper">
<div class="table">
- <div class="table-header bg-color-heading">
+ <div class="table-header bg-color-heading text-color-white">
<div class="table-cell w280">Lorem</div>
<div class="table-cell w280">Ipsum</div>
<div class="table-cell w280">Dolor</div>
diff --git a/src/styles/base/buttons.scss b/src/styles/base/buttons.scss
deleted file mode 100644
index e6a4f7d098fb70a4ecffa5b141bb67c2ea1012a6..0000000000000000000000000000000000000000
--- a/src/styles/base/buttons.scss
+++ /dev/null
@@ -1,284 +0,0 @@
-// Button global CSS
-solid-delete,
-solid-route,
-solid-link,
-button,
-input[type='submit'],
-a,
-.button {
- background: none;
- border: none;
- cursor: pointer;
- display: inline-block;
- padding: 0;
-
- &.button {
- padding: 0.55rem 2.5rem;
- border-radius: 100em;
-
- *,
- & {
- font-size: 1.4rem;
- }
-
- &.mobile-full-width {
- margin-bottom: 1rem;
- padding-left: 5rem;
- width: -webkit-fill-available;
- width: -moz-available;
-
- @include breakpoint(lg) {
- margin-bottom: 0;
- padding-left: 2.5rem;
- width: auto;
- }
-
- &::before {
- margin-left: -2.6rem;
-
- @include breakpoint(lg) {
- margin-left: 0;
- }
- }
- }
-
- &.desktop-btn-margin__left {
- margin: 0;
-
- @include breakpoint(lg) {
- margin-left: 2.2rem;
- }
- }
-
- &.small {
-
- *,
- & {
- font-size: 1rem;
- }
- }
-
- &.text-bold {
-
- *,
- & {
- font-weight: bold;
- }
- }
-
- &.text-uppercase {
-
- *,
- & {
- text-transform: uppercase;
- }
- }
-
- &.rounded {
- border-radius: 50%;
- font-size: 1.8rem;
- padding: 1rem;
- height: 42px;
- width: 42px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0 auto;
- }
-
- &.button-link {
- border-radius: 100em;
-
- *,
- & {
- text-decoration: underline;
- }
-
- &:hover {
- text-decoration: none;
- }
- }
-
- &.with-icon::before {
- font-size: 1.6rem;
- margin-right: 1rem;
- }
-
- &.button-primary{
- background-color: var(--color-white);
-
- *,
- & {
- color: var(--color-primary);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-primary);
- }
-
- &:hover {
- background-color: var(--color-primary);
-
- *,
- & {
- color: var(--color-white);
- }
- }
- }
-
- &.button-disabled{
- cursor: not-allowed;
- background-color: var(--color-white);
-
- *,
- & {
- color: var(--color-grey-3);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-grey-3);
- }
-
- &:hover {
- background-color: var(--color-white);
-
- *,
- & {
- color: var(--color-grey-3);
- }
- }
- }
-
- &.button-secondary {
- background-color: var(--color-white);
-
- *,
- & {
- color: var(--color-secondary);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-secondary);
- }
-
- &:hover {
- background-color: var(--color-secondary);
-
- *,
- & {
- color: var(--color-white);
- }
- }
- }
-
- &.button-complementary {
- color: var(--color-complementary);
- background-color: var(--color-white);
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-complementary);
- }
-
- &:hover {
- background-color: var(--color-complementary);
- color: var(--color-white);
- }
- }
-
- &.flex {
- display: flex;
- }
-
- &.reversed {
- &.button-primary {
- background-color: var(--color-primary);
-
- *,
- & {
- color: var(--color-white);
- }
-
- &:hover {
- background-color: var(--color-white);
- color: var(--color-primary);
-
- *,
- & {
- color: var(--color-primary);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-primary);
- }
- }
- }
-
- &.button-disabled{
- cursor: not-allowed;
- background-color: var(--color-grey-3);
-
- *,
- & {
- color: var(--color-white);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-white);
- }
-
- &:hover {
- background-color: var(--color-grey-3);
-
- *,
- & {
- color: var(--color-white);
- }
- }
- }
-
- &.button-secondary {
- background-color: var(--color-secondary);
-
- *,
- & {
- color: var(--color-white);
- }
-
- &:hover {
- background-color: var(--color-white);
-
- *,
- & {
- color: var(--color-secondary);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-secondary);
- }
- }
- }
-
- &.button-complementary {
- background-color: var(--color-complementary);
-
- *,
- & {
- color: var(--color-white);
- }
-
- &:hover {
- background-color: var(--color-white);
-
- *,
- & {
- color: var(--color-complementary);
- }
-
- &.bordered, &.button-bordered {
- border: 1px solid var(--color-complementary);
- }
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/README.md b/src/styles/hubl-framework/README.md
index 7f98fa3185060605286c59c3dd8834b2c7142941..9499afbc194ccc552a4eedecc6b700d2b732007d 100644
--- a/src/styles/hubl-framework/README.md
+++ b/src/styles/hubl-framework/README.md
@@ -1,15 +1,18 @@
# GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI !
-Les avatars
+## Les avatars
+
Utiliser la class `.avatar` sur un élément HTML englobant une image.
L'élément sera arrondi avec une hauteur et une largeur par défaut de 50px.
Les avatars peuvent avoir différentes tailles.
-Les badges
+## Les badges
+
Utiliser la class `.badge` sur un élément HTML.
L'élément sera arrondi. Par défaut, le texte sera bleu foncé et sa taille fera 11px, l'intérieur du cercle sera vert avec une taille de 18px;
Le texte et le cercle peuvent avoir différente couleurs.
-Les boutons
+## Les boutons
+
Utiliser la class `.button` sur un élément HTML.
Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs.
diff --git a/src/styles/hubl-framework/_index.scss b/src/styles/hubl-framework/_index.scss
index 2193a7008b5a68440bc1949a74df09f3ee3a17fc..70429ceb1cd35702749c112380ccd1e7a6cf5fec 100644
--- a/src/styles/hubl-framework/_index.scss
+++ b/src/styles/hubl-framework/_index.scss
@@ -1,11 +1,7 @@
@charset "UTF-8";
-@import '../../../node_modules/include-media/dist/include-media';
-@import '../../../node_modules/normalize.css/normalize';
+@import 'normalize.css';
-.block {
- display: block;
-}
@import 'commons/_index';
@import 'icons/_index';
@import 'avatars/_index';
diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss
index 23979fd0fba172b47413c2d9020109c2e01c7968..38b8e47347541494f04ae0049fab551b23ac6ea2 100644
--- a/src/styles/hubl-framework/commons/_index.scss
+++ b/src/styles/hubl-framework/commons/_index.scss
@@ -1,3 +1,24 @@
+:root {
+ box-sizing: border-box;
+ color: #636363;
+ font-family: Open Sans, sans-serif;
+ font-size: 14px;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
+
+.hidden, [hidden] {
+ display: none !important;
+}
+
+.block {
+ display: block;
+}
+
@import 'colors';
@import 'loaders';
@import 'texts';
diff --git a/src/fonts/FacitBold.eot b/src/styles/hubl-framework/fonts/FacitBold.eot
similarity index 100%
rename from src/fonts/FacitBold.eot
rename to src/styles/hubl-framework/fonts/FacitBold.eot
diff --git a/src/fonts/FacitBold.svg b/src/styles/hubl-framework/fonts/FacitBold.svg
similarity index 100%
rename from src/fonts/FacitBold.svg
rename to src/styles/hubl-framework/fonts/FacitBold.svg
diff --git a/src/fonts/FacitBold.ttf b/src/styles/hubl-framework/fonts/FacitBold.ttf
similarity index 100%
rename from src/fonts/FacitBold.ttf
rename to src/styles/hubl-framework/fonts/FacitBold.ttf
diff --git a/src/fonts/FacitBold.woff b/src/styles/hubl-framework/fonts/FacitBold.woff
similarity index 100%
rename from src/fonts/FacitBold.woff
rename to src/styles/hubl-framework/fonts/FacitBold.woff
diff --git a/src/fonts/FacitRegular.eot b/src/styles/hubl-framework/fonts/FacitRegular.eot
similarity index 100%
rename from src/fonts/FacitRegular.eot
rename to src/styles/hubl-framework/fonts/FacitRegular.eot
diff --git a/src/fonts/FacitRegular.svg b/src/styles/hubl-framework/fonts/FacitRegular.svg
similarity index 100%
rename from src/fonts/FacitRegular.svg
rename to src/styles/hubl-framework/fonts/FacitRegular.svg
diff --git a/src/fonts/FacitRegular.ttf b/src/styles/hubl-framework/fonts/FacitRegular.ttf
similarity index 100%
rename from src/fonts/FacitRegular.ttf
rename to src/styles/hubl-framework/fonts/FacitRegular.ttf
diff --git a/src/fonts/FacitRegular.woff b/src/styles/hubl-framework/fonts/FacitRegular.woff
similarity index 100%
rename from src/fonts/FacitRegular.woff
rename to src/styles/hubl-framework/fonts/FacitRegular.woff
diff --git a/src/fonts/RefrigeratorDelxW01Bold.eot b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot
similarity index 100%
rename from src/fonts/RefrigeratorDelxW01Bold.eot
rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot
diff --git a/src/fonts/RefrigeratorDelxW01Bold.svg b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg
similarity index 100%
rename from src/fonts/RefrigeratorDelxW01Bold.svg
rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg
diff --git a/src/fonts/RefrigeratorDelxW01Bold.ttf b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf
similarity index 100%
rename from src/fonts/RefrigeratorDelxW01Bold.ttf
rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf
diff --git a/src/fonts/RefrigeratorDelxW01Bold.woff b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff
similarity index 100%
rename from src/fonts/RefrigeratorDelxW01Bold.woff
rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff
diff --git a/src/fonts/custom-icons.eot b/src/styles/hubl-framework/fonts/custom-icons.eot
similarity index 100%
rename from src/fonts/custom-icons.eot
rename to src/styles/hubl-framework/fonts/custom-icons.eot
diff --git a/src/fonts/custom-icons.svg b/src/styles/hubl-framework/fonts/custom-icons.svg
similarity index 100%
rename from src/fonts/custom-icons.svg
rename to src/styles/hubl-framework/fonts/custom-icons.svg
diff --git a/src/fonts/custom-icons.ttf b/src/styles/hubl-framework/fonts/custom-icons.ttf
similarity index 100%
rename from src/fonts/custom-icons.ttf
rename to src/styles/hubl-framework/fonts/custom-icons.ttf
diff --git a/src/fonts/custom-icons.woff b/src/styles/hubl-framework/fonts/custom-icons.woff
similarity index 100%
rename from src/fonts/custom-icons.woff
rename to src/styles/hubl-framework/fonts/custom-icons.woff
diff --git a/src/fonts/material-design-icons.eot b/src/styles/hubl-framework/fonts/material-design-icons.eot
similarity index 100%
rename from src/fonts/material-design-icons.eot
rename to src/styles/hubl-framework/fonts/material-design-icons.eot
diff --git a/src/fonts/material-design-icons.svg b/src/styles/hubl-framework/fonts/material-design-icons.svg
similarity index 100%
rename from src/fonts/material-design-icons.svg
rename to src/styles/hubl-framework/fonts/material-design-icons.svg
diff --git a/src/fonts/material-design-icons.ttf b/src/styles/hubl-framework/fonts/material-design-icons.ttf
similarity index 100%
rename from src/fonts/material-design-icons.ttf
rename to src/styles/hubl-framework/fonts/material-design-icons.ttf
diff --git a/src/fonts/material-design-icons.woff b/src/styles/hubl-framework/fonts/material-design-icons.woff
similarity index 100%
rename from src/fonts/material-design-icons.woff
rename to src/styles/hubl-framework/fonts/material-design-icons.woff
diff --git a/src/fonts/material-design-icons.woff2 b/src/styles/hubl-framework/fonts/material-design-icons.woff2
similarity index 100%
rename from src/fonts/material-design-icons.woff2
rename to src/styles/hubl-framework/fonts/material-design-icons.woff2
diff --git a/src/fonts/simple-line-icons.eot b/src/styles/hubl-framework/fonts/simple-line-icons.eot
similarity index 100%
rename from src/fonts/simple-line-icons.eot
rename to src/styles/hubl-framework/fonts/simple-line-icons.eot
diff --git a/src/fonts/simple-line-icons.svg b/src/styles/hubl-framework/fonts/simple-line-icons.svg
similarity index 100%
rename from src/fonts/simple-line-icons.svg
rename to src/styles/hubl-framework/fonts/simple-line-icons.svg
diff --git a/src/fonts/simple-line-icons.ttf b/src/styles/hubl-framework/fonts/simple-line-icons.ttf
similarity index 100%
rename from src/fonts/simple-line-icons.ttf
rename to src/styles/hubl-framework/fonts/simple-line-icons.ttf
diff --git a/src/fonts/simple-line-icons.woff b/src/styles/hubl-framework/fonts/simple-line-icons.woff
similarity index 100%
rename from src/fonts/simple-line-icons.woff
rename to src/styles/hubl-framework/fonts/simple-line-icons.woff
diff --git a/src/fonts/simple-line-icons.woff2 b/src/styles/hubl-framework/fonts/simple-line-icons.woff2
similarity index 100%
rename from src/fonts/simple-line-icons.woff2
rename to src/styles/hubl-framework/fonts/simple-line-icons.woff2
diff --git a/src/styles/hubl-framework/icons/custom-icons.scss b/src/styles/hubl-framework/icons/custom-icons.scss
index 7c51b6412d0d3ba6250684366de8d6388a664bfc..e69e85d4c8fdfe61a16ce3a69f6059e051e31d7e 100644
--- a/src/styles/hubl-framework/icons/custom-icons.scss
+++ b/src/styles/hubl-framework/icons/custom-icons.scss
@@ -4,7 +4,7 @@ $ci-filename: "custom-icons";
$ci-font-name: "custom-icons";
$ci-font-family: "custom-icons";
$ci-font-weight: "regular";
-$ci-font-path: "../fonts" !default;
+$ci-font-path: "fonts" !default;
$ci-css-prefix: ci !default;
$ci-version: "tlnzh2" !default;
diff --git a/src/styles/hubl-framework/icons/material-design-icons.scss b/src/styles/hubl-framework/icons/material-design-icons.scss
index 2793d8491c7593d4d611e5e5b281a82d9100129d..baa0a20137d783061117b7639b66071e32a96408 100644
--- a/src/styles/hubl-framework/icons/material-design-icons.scss
+++ b/src/styles/hubl-framework/icons/material-design-icons.scss
@@ -4,7 +4,7 @@ $mdi-filename: "material-design-icons";
$mdi-font-name: "material-design-icons";
$mdi-font-family: "material-design-icons";
$mdi-font-weight: "regular";
-$mdi-font-path: "../fonts" !default;
+$mdi-font-path: "fonts" !default;
$mdi-css-prefix: mdi !default;
$mdi-version: "3.3.92" !default;
diff --git a/src/styles/hubl-framework/icons/simple-line-icons.scss b/src/styles/hubl-framework/icons/simple-line-icons.scss
index dee247e009b2e636176d1cdc256be5ffe20c45bf..0a33c85f72655495587be8b72dc39f374d692778 100644
--- a/src/styles/hubl-framework/icons/simple-line-icons.scss
+++ b/src/styles/hubl-framework/icons/simple-line-icons.scss
@@ -1,12 +1,12 @@
@font-face {
font-family: 'simple-line-icons';
- src: url('../fonts/simple-line-icons.eot?23594131');
- src: url('../fonts/simple-line-icons.eot?23594131#iefix')
+ src: url('fonts/simple-line-icons.eot?23594131');
+ src: url('fonts/simple-line-icons.eot?23594131#iefix')
format('embedded-opentype'),
- url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
- url('../fonts/simple-line-icons.woff?23594131') format('woff'),
- url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
- url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
+ url('fonts/simple-line-icons.woff2?23594131') format('woff2'),
+ url('fonts/simple-line-icons.woff?23594131') format('woff'),
+ url('fonts/simple-line-icons.ttf?23594131') format('truetype'),
+ url('fonts/simple-line-icons.svg?23594131#simple-line-icons')
format('svg');
font-weight: normal;
font-style: normal;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 696e9cf414c3a088b05012a382b68d2aeb3405d7..068550fcaf4f2e423be157836e1190ae78f48e82 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,24 +1,5 @@
@charset "UTF-8";
-@import 'normalize.css';
-
-:root {
- box-sizing: border-box;
- color: #636363;
- font-family: Open Sans, sans-serif;
- font-size: 14px;
-}
-
-*,
-*:before,
-*:after {
- box-sizing: inherit;
-}
-
-.hidden, [hidden] {
- display: none !important;
-}
-
main {
background-color: pink;
}
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index 3c39c57a9acad3daa80a36074fdc9974e63957b6..53d1a8f5c1c73ab7d4d3a99a84d3c95103243b92 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -1,15 +1,15 @@
.views-container.sidebar-is-closed
solid-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden, data-view="circle-chat")
- include views/circle/page-circle-chat.pug
+ include partials/circle/page-circle-chat.pug
#circle-information.content-box__height(hidden, data-view="circle-information")
- include views/circle/page-circle-profile.pug
+ include partials/circle/page-circle-profile.pug
#circle-events(hidden, data-view="circle-events")
- include views/circle/page-circle-events.pug
+ include partials/circle/page-circle-events.pug
#circle-resources(hidden, data-view="circle-resources")
- include views/circle/page-circle-resources.pug
+ include partials/circle/page-circle-resources.pug
#circle-polls(hidden, data-view="circle-polls")
- include views/circle/page-circle-polls.pug
+ include partials/circle/page-circle-polls.pug
nav.jsRightMenu(role='navigation')
solid-router.text-color-heading.text-bold(default-route='circle-chat')
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index 13b40a39e80adf29726c031d47238886c126d3d5..be8e8b8b5aba01f2461c08172a03c079d734d6c9 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -1,11 +1,11 @@
.views-container.sidebar-is-closed
solid-ac-checker(permission='acl:Read', bind-resources)
#project-chat(hidden, data-view="project-chat")
- include views/project/page-project-chat.pug
+ include partials/project/page-project-chat.pug
#project-information(hidden, data-view="project-information")
- include views/project/page-project-profile.pug
+ include partials/project/page-project-profile.pug
#project-picture(hidden, data-view="project-picture")
- include views/project/page-project-picture.pug
+ include partials/project/page-project-picture.pug
nav.jsRightMenu(role='navigation')
solid-router.text-color-heading.text-bold(default-route='project-chat')