From a192db463c2d26e3f8d3515d49a3a613f6fa2c13 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Sun, 9 Dec 2018 19:56:56 +0100
Subject: [PATCH] right panel ok
---
src/page-job-offers.pug | 16 ++++++------
src/styles/content.scss | 51 -------------------------------------
src/styles/index.scss | 1 +
src/styles/main.scss | 11 +++++---
src/styles/right-panel.scss | 49 +++++++++++++++++++++++++++++++++++
5 files changed, 65 insertions(+), 63 deletions(-)
create mode 100644 src/styles/right-panel.scss
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index ca0ea381..466c96a1 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -1,7 +1,7 @@
div.grid-layer
div.grid-layer-main.containerV
- h2 New offers
- span Here you can find and post offers
+ h2 Nouvelles offres
+ span Tu trouveras ici des offres de missions
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
data-fields='date, user-thumb, title, description, skills',
@@ -16,11 +16,11 @@ div.grid-layer
)
div.grid-layer-links.containerV
sib-link(next="job-offer-create").containerH.containerCenter.action-link
- div.containerV.fix.icon-plus
- div.containerV.fix Post a new offer
+ div.icon-plus
+ div Poster une offre
sib-link().containerH.containerCenter.how-link
- div.containerV.fix.icon-idea
- div.containerV.grow How To find a new offer
+ div.icon-idea
+ div.grow Comment trouver une offre ?
sib-link().containerH.containerCenter.how-link
- div.containerV.fix.icon-idea
- div.containerV.grow How to set notification ?
+ div.icon-idea
+ div.grow Comment programmer des notifications ?
diff --git a/src/styles/content.scss b/src/styles/content.scss
index 7605e890..147acd66 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -452,57 +452,6 @@ hdapp-available {
}
}
-.right-link {
- padding: 0.5em;
- margin-bottom: 1em;
- margin-left: 1em;
- flex-basis: content;
- border-radius: 2em;
-
- div[class*="icon-"] {
- margin-right: 1em;
- }
-}
-
-.how-link {
- @extend .right-link;
- background-color: $color-white;
- color: $color-black;
- flex-wrap: nowrap;
- .icon-idea {
- background-color: $color-yellow-light;
- border-radius: 100%;
- flex-shrink: 0;
- flex-grow: 0;
- justify-content: center;
- align-items: center;
- display: flex;
- flex-direction: column;
- width: 1.8em;
- height: 1.8em;
- //margin-right: 1em;
- }
-}
-
-.action-link {
- @extend .right-link;
- background-color: $color-yellow;
- color: $color-white;
- font-weight: bold;
- text-transform: uppercase;
-
- .icon-plus {
- flex-shrink: 0;
- flex-grow: 0;
- justify-content: center;
- align-items: center;
- display: flex;
-
- &:before {
- //font-size: 1.3em;
- }
- }
-}
/*
label {
@extend h2;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 457c9b48..f76054e5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,6 +8,7 @@
@import 'main';
@import 'form';
@import 'content';
+@import 'right-panel';
// @import 'members';
@import 'header';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 676fb429..15cf084b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -49,11 +49,11 @@ h1 {
}
h2 {
- font-size: 1.04em;
+ font-size: 20px;
}
h3 {
- font-size: 0.84em;
+ font-size: 20px;
}
h4 {
@@ -276,16 +276,19 @@ sib-trigger.back {
.grid-layer{
display: grid;
- grid-template-columns: [start]auto[middle]20em[end];
- grid-template-rows: [start]10em[middle]auto[end];
+ font-size: 16px;
+ grid-template-columns: [start]auto[middle]25%[end];
+ grid-template-rows: [start]13em[middle]auto[end];
}
.grid-layer-main{
+ background: green;
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
.grid-layer-links{
+ background: pink;
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss
new file mode 100644
index 00000000..fd973525
--- /dev/null
+++ b/src/styles/right-panel.scss
@@ -0,0 +1,49 @@
+.right-link {
+ padding: 0.5em;
+ margin-bottom: 1em;
+ margin-left: 5em;
+ flex-basis: auto;
+ border-radius: 2em;
+
+ div[class*="icon-"] {
+ align-items: center;
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+}
+
+.how-link {
+ @extend .right-link;
+ background-color: $color-white;
+ color: $color-black;
+ flex-wrap: nowrap;
+ .icon-idea {
+ background-color: $color-yellow-light;
+ border-radius: 100%;
+ justify-content: center;
+ margin-right: 0.7em;
+ //flex-direction: column;
+ width: 1.8em;
+ height: 1.8em;
+ //margin-right: 1em;
+ }
+}
+
+.action-link {
+ @extend .right-link;
+ background-color: $color-yellow;
+ color: $color-white;
+ font-weight: bold;
+ text-transform: uppercase;
+
+ .icon-plus {
+ font-size: 20px;
+ justify-content: center;
+ margin: 0.3em 0.3em 0.3em 0;
+
+ &:before {
+ //font-size: 1.3em;
+ }
+ }
+}
\ No newline at end of file
--
GitLab