From a7877a865ef44392c307942e6a877ebfd6162400 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 18 Sep 2019 17:24:45 +0200 Subject: [PATCH] Design instance card --- .eslintrc.js | 14 +- README.md | 69 +------- src/components/ContentSelection.vue | 12 -- src/components/InstanceCard.vue | 224 ++++++++++++++++++++++++ src/components/InstancesList.vue | 231 +++++++++++++++---------- src/components/icons/IconFollowers.vue | 23 +++ src/components/icons/IconFollowing.vue | 27 +++ src/components/icons/IconLanguages.vue | 26 +++ src/scss/_variables.scss | 1 + src/scss/main.scss | 13 ++ 10 files changed, 467 insertions(+), 173 deletions(-) create mode 100644 src/components/InstanceCard.vue create mode 100644 src/components/icons/IconFollowers.vue create mode 100644 src/components/icons/IconFollowing.vue create mode 100644 src/components/icons/IconLanguages.vue diff --git a/.eslintrc.js b/.eslintrc.js index 98d0431..e3577af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,8 +9,20 @@ module.exports = { ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + 'vue/script-indent': ['error', 2, { + baseIndent: 1, + switchCase: 1 + }] }, + overrides: [ + { + files: ['*.vue'], + rules: { + indent: 'off' + } + } + ], parserOptions: { parser: 'babel-eslint' } diff --git a/README.md b/README.md index 17b6223..5ac7695 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,13 @@ +# JoinPeerTube -Architecture de base pour un site statique réactif et internationalisé à l’aide de : -- Vuejs 2 -- Vue-i18n + Vue-router pour l’internationnalisation des pages -- Import de jQuery, Bootstrap et ForkAwesome -- YAML pour les fichiers de langue (plus lisible qu’un JSON mais automatiquement converti) -- SASS pour l’habillage -- Webpack 4 pour automatiser la construction de l’ensemble - -## En prod -Pour construire le site : +## Dev ``` -npm install -npm run prod +$ npm run serve ``` -Les fichiers sont placés dans le dossier public. -Le site fonctionne uniquement à la racine du domaine. -Les pages sont prérendues **avec les traductions dans le code html** - -## En développement -Pour voir le site en local +## Build for production ``` -npm run dev -``` - -Les changements s’appliquent en temps réel et se voient sur http://localhost:8080/. - -## En preview -On peut forcer la construction du site en local avec la commande : - -``` -npm run preview -``` - -Mais l’intérêt consiste surtout à voir le rendu sur les Gitlab Pages. -Les fichiers sont placés dans un sous-dossier du dossier public -correspondant au nom du dépôt. -Les pages sont prérendues **sans les traductions dans le code html** (la `fallbackLocale` est utilisée). -Celles-ci sont chargées dynamiquement (important à savoir lorsqu’il faut débugger un script). - -``` -├── app -│   ├── App.vue -│   ├── assets -│   │   ├── fonts -│   │   ├── icons -│   │   ├── img -│   │   └── scss -│   │   └── main.scss # le fichier compilé est minifié dans /public/style.css -│   ├── components -│   │   ├── pages # exemple de pages (juste le titre change) -│   │   │   ├── About.vue -│   │   │   ├── Home.vue -│   │   │   └── HowItWorks.vue -│   │   └── partials -│   │   ├── Header.vue # en-tête et menu de navigation -│   │   ├── I18n.vue # switch en/fr -│   │   └── i18n.js # script de changement de langue -│   ├── index.js # gestion de l’i18n + routage des pages + import des assets -│   └── locales # traductions -│   ├── en.yml -│   └── fr.yml -├── index.html # le fichier est simplement copié dans /public -├── package.json # liste des dépendances + définition de commandes npm run dev|prod -├── package-lock.json -├── postcss.config.js # juste pour préfixer les css avec -webkit, -moz, -ms -├── README.md -└── webpack.config.js # config webpack pour la construction du site +$ npm run build ``` diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue index 1844049..115c008 100644 --- a/src/components/ContentSelection.vue +++ b/src/components/ContentSelection.vue @@ -107,18 +107,6 @@ .tags { display: flex; - - .tag { - border: 1px solid $orange; - border-radius: 10px; - margin-right: 20px; - font-size: 14px; - min-width: 140px; - height: 25px; - display: flex; - align-items: center; - justify-content: center; - } } } diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue new file mode 100644 index 0000000..9af290c --- /dev/null +++ b/src/components/InstanceCard.vue @@ -0,0 +1,224 @@ + + + + + diff --git a/src/components/InstancesList.vue b/src/components/InstancesList.vue index 112fd8e..5e2c953 100644 --- a/src/components/InstancesList.vue +++ b/src/components/InstancesList.vue @@ -3,7 +3,7 @@
Filter according to your preferences
-
+
@@ -47,7 +47,7 @@
- + Hide @@ -78,7 +78,7 @@ >
-
+
@@ -102,9 +102,23 @@
-
-
- Sorry, but we cannot fetch the instances list. Please retry later. +
+
Instances list
+ +
+
+ + +
+
+ +
+
+ Sorry, but we cannot fetch the instances list. Please retry later. +
@@ -113,11 +127,14 @@ diff --git a/src/components/icons/IconFollowers.vue b/src/components/icons/IconFollowers.vue new file mode 100644 index 0000000..22488aa --- /dev/null +++ b/src/components/icons/IconFollowers.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/components/icons/IconFollowing.vue b/src/components/icons/IconFollowing.vue new file mode 100644 index 0000000..25bae03 --- /dev/null +++ b/src/components/icons/IconFollowing.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/components/icons/IconLanguages.vue b/src/components/icons/IconLanguages.vue new file mode 100644 index 0000000..cbee301 --- /dev/null +++ b/src/components/icons/IconLanguages.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 24d8aa2..66905d4 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,3 +1,4 @@ $font-semibold: 600; $orange: #f67e08; +$grey: #5e5e5e; diff --git a/src/scss/main.scss b/src/scss/main.scss index 7c027bf..2c4200f 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -203,3 +203,16 @@ main { width: 200px; } } + +.tag { + border: 1px solid $orange; + border-radius: 10px; + margin-right: 20px; + font-size: 14px; + min-width: 140px; + height: 25px; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; +}