Commit 4f282a22 authored by Maxime's avatar Maxime
Browse files

revamp demand section

parent aca38355
# -*- coding: utf-8 -*-
# Generated by Django 1.11.29 on 2020-09-08 11:38
from __future__ import unicode_literals
from django.db import migrations, models
import djangoldp.fields
class Migration(migrations.Migration):
dependencies = [
('server', '0016_auto_20200907_1307'),
]
operations = [
migrations.CreateModel(
name='legalisationConditions',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('urlid', djangoldp.fields.LDPUrlField(blank=True, null=True, unique=True)),
('is_backlink', models.BooleanField(default=False, help_text='set automatically to indicate the Model is a backlink')),
('allow_create_backlink', models.BooleanField(default=True, help_text='set to False to disable backlink creation after Model save')),
('title', models.CharField(max_length=150, verbose_name='titre')),
('content', models.TextField(verbose_name='Description')),
('source', models.URLField(blank=True, null=True, verbose_name='source')),
('tag', models.ManyToManyField(to='server.Tag', verbose_name="Type d'argument")),
],
options={
'ordering': ['?'],
},
),
]
# -*- coding: utf-8 -*-
# Generated by Django 1.11.29 on 2020-09-08 11:39
from __future__ import unicode_literals
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('server', '0017_legalisationconditions'),
]
operations = [
migrations.RenameModel(
old_name='legalisationConditions',
new_name='legalisationCondition',
),
]
# -*- coding: utf-8 -*-
# Generated by Django 1.11.29 on 2020-09-08 11:43
from __future__ import unicode_literals
from django.db import migrations, models
import djangoldp.fields
class Migration(migrations.Migration):
dependencies = [
('server', '0018_auto_20200908_1139'),
]
operations = [
migrations.CreateModel(
name='conditionTags',
fields=[
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('urlid', djangoldp.fields.LDPUrlField(blank=True, null=True, unique=True)),
('is_backlink', models.BooleanField(default=False, help_text='set automatically to indicate the Model is a backlink')),
('allow_create_backlink', models.BooleanField(default=True, help_text='set to False to disable backlink creation after Model save')),
('name', models.CharField(max_length=100, verbose_name='Tag name')),
],
),
migrations.AlterField(
model_name='legalisationcondition',
name='tag',
field=models.ManyToManyField(to='server.conditionTags', verbose_name='Type'),
),
]
# -*- coding: utf-8 -*-
# Generated by Django 1.11.29 on 2020-09-08 11:48
from __future__ import unicode_literals
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('server', '0019_auto_20200908_1143'),
]
operations = [
migrations.RenameModel(
old_name='conditionTags',
new_name='conditionTag',
),
]
......@@ -51,12 +51,35 @@ class Tag(Model):
def __str__(self):
return self.name
class conditionTag(Model):
name = models.CharField(max_length=100, verbose_name=u"Tag name")
class Meta:
serializer_fields = ['@id','name']
def __str__(self):
return self.name
class reasonsToLegalize(Model):
title = models.CharField(max_length=150, verbose_name=u"titre de l'argument")
content = models.TextField(verbose_name=u"Description de l'argument")
source = models.URLField(verbose_name=u"source", null=True, blank=True)
tag = models.ManyToManyField(Tag,verbose_name=u"Type d'argument")
class Meta:
serializer_fields = ['@id','title','content','source','tag']
anonymous_perms = ['view']
authenticated_perms = ['inherit', 'add']
ordering = ['?']
def __str__(self):
return self.title
class legalisationCondition(Model):
title = models.CharField(max_length=150, verbose_name=u"titre")
content = models.TextField(verbose_name=u"Description")
source = models.URLField(verbose_name=u"source", null=True, blank=True)
tag = models.ManyToManyField(conditionTag,verbose_name=u"Type")
class Meta:
serializer_fields = ['@id','title','content','source','tag']
anonymous_perms = ['view']
......
......@@ -10293,7 +10293,6 @@ Main CSS done in the EO email file, here css mainly for the tab display
width: 30%;
padding: 15px 0px;
margin: 15px auto 0 auto;
min-height: 350px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
......@@ -10306,7 +10305,7 @@ Main CSS done in the EO email file, here css mainly for the tab display
}
.carouselle section div:first-child {
background-color: #0B4DB8;
min-height: 200px;
min-height: 250px;
width: 100%;
padding: 15px;
color: white;
......@@ -10326,27 +10325,10 @@ Main CSS done in the EO email file, here css mainly for the tab display
margin: auto;
padding: 15px;
}
.carouselle section:nth-child(1) {
background-image: url("https://mgretailer.com/wp-content/uploads/2019/10/Scales-of-Justice.jpg");
}
.carouselle section:nth-child(2) {
background-image: url("https://www.nuntisunya.com/wp-content/uploads/2017/02/hempmeds-blog-image-hemp-10-13-16-ver2-1200x565.png");
background-size: cover;
}
.carouselle section:nth-child(3) {
background-image: url("https://photos.lci.fr/images/1280/720/cannabis-drogue-euros-billets-3f97ac-0@1x.jpeg");
background-size: cover;
}
.carouselle section:nth-child(odd) {
background-color: #FF9D00;
}
.carouselle section:nth-child(odd) .card {
background-color: #FF9D00;
box-shadow: -10px 0 10px #0B4DB8;
}
.carouselle section:nth-child(even) {
background-color: #0B4DB8;
}
.carouselle section:nth-child(even) .card {
background-color: #0B4DB8;
box-shadow: -10px 0 10px #FF9D00;
......@@ -10512,8 +10494,8 @@ Main CSS done in the EO email file, here css mainly for the tab display
font-weight: bold;
}
/*Why end prohibition bloc*/
#arguments-fin-prohibition {
/*Why end prohibition bloc && conditions to legalise*/
#arguments-fin-prohibition, #cadre-legalisation {
width: 90vw;
margin: 50px auto;
padding-bottom: 2rem;
......@@ -10521,24 +10503,24 @@ Main CSS done in the EO email file, here css mainly for the tab display
Style each argument block
****/
}
#arguments-fin-prohibition sib-form {
#arguments-fin-prohibition sib-form, #cadre-legalisation sib-form {
display: flex;
justify-content: center;
}
#arguments-fin-prohibition sib-form [name=tag] {
#arguments-fin-prohibition sib-form [name=tag], #cadre-legalisation sib-form [name=tag] {
width: 15%;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition sib-form [name=tag] {
#arguments-fin-prohibition sib-form [name=tag], #cadre-legalisation sib-form [name=tag] {
width: 60%;
}
}
@media only screen and (min-width: 1001px) and (max-width: 1500px) {
#arguments-fin-prohibition sib-form [name=tag] {
#arguments-fin-prohibition sib-form [name=tag], #cadre-legalisation sib-form [name=tag] {
width: 40%;
}
}
#arguments-fin-prohibition sib-form [name=tag] select {
#arguments-fin-prohibition sib-form [name=tag] select, #cadre-legalisation sib-form [name=tag] select {
border: 1px solid #0B4DB8;
width: 100%;
border-radius: 15px;
......@@ -10546,33 +10528,33 @@ Main CSS done in the EO email file, here css mainly for the tab display
text-align-last: center;
font-style: italic;
}
#arguments-fin-prohibition #reasons-end-prohibition > div {
#arguments-fin-prohibition #reasons-end-prohibition > div, #arguments-fin-prohibition #legalisation-conditions > div, #cadre-legalisation #reasons-end-prohibition > div, #cadre-legalisation #legalisation-conditions > div {
overflow-x: scroll;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 800px;
max-height: 1000px;
height: 420px;
max-height: 420px;
max-width: 100%;
justify-content: flex-start;
order: 1;
align-items: center;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition #reasons-end-prohibition > div {
#arguments-fin-prohibition #reasons-end-prohibition > div, #arguments-fin-prohibition #legalisation-conditions > div, #cadre-legalisation #reasons-end-prohibition > div, #cadre-legalisation #legalisation-conditions > div {
height: 450px;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display, #arguments-fin-prohibition #legalisation-conditions > div > sib-display, #cadre-legalisation #reasons-end-prohibition > div > sib-display, #cadre-legalisation #legalisation-conditions > div > sib-display {
width: 20%;
margin: 0.5rem;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display, #arguments-fin-prohibition #legalisation-conditions > div > sib-display, #cadre-legalisation #reasons-end-prohibition > div > sib-display, #cadre-legalisation #legalisation-conditions > div > sib-display {
width: 60%;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div, #cadre-legalisation #legalisation-conditions > div > sib-display > div {
display: flex;
flex-direction: column;
align-items: center;
......@@ -10582,47 +10564,47 @@ Main CSS done in the EO email file, here css mainly for the tab display
height: 350px;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div, #cadre-legalisation #legalisation-conditions > div > sib-display > div {
height: 350px;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=title] {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=title], #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div [name=title], #cadre-legalisation #reasons-end-prohibition > div > sib-display > div [name=title], #cadre-legalisation #legalisation-conditions > div > sib-display > div [name=title] {
min-height: 70px;
margin-bottom: 0.5rem;
text-align: center;
}
@media only screen and (min-width: 1001px) and (max-width: 1500px) {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=title] {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=title], #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div [name=title], #cadre-legalisation #reasons-end-prohibition > div > sib-display > div [name=title], #cadre-legalisation #legalisation-conditions > div > sib-display > div [name=title] {
font-size: 14px;
overflow: hidden;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=content] > div {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=content] > div, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div [name=content] > div, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div [name=content] > div, #cadre-legalisation #legalisation-conditions > div > sib-display > div [name=content] > div {
min-height: 100px;
max-height: 100px;
overflow: hidden;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=content] > div {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=content] > div, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div [name=content] > div, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div [name=content] > div, #cadre-legalisation #legalisation-conditions > div > sib-display > div [name=content] > div {
min-height: 100px;
max-height: 100px;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=content]:hover {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=content]:hover, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div [name=content]:hover, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div [name=content]:hover, #cadre-legalisation #legalisation-conditions > div > sib-display > div [name=content]:hover {
max-height: 500px;
overflow: auto;
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=source] {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div [name=source], #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div [name=source], #cadre-legalisation #reasons-end-prohibition > div > sib-display > div [name=source], #cadre-legalisation #legalisation-conditions > div > sib-display > div [name=source] {
margin: 0.5rem 0;
width: 100%;
font-size: 14px;
text-align: right;
font-style: italic;
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag], #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div sib-multiple[name=tag], #cadre-legalisation #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag], #cadre-legalisation #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] {
width: 100%;
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type, #cadre-legalisation #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type {
display: flex;
flex-direction: row;
justify-content: space-evenly;
......@@ -10631,30 +10613,30 @@ Main CSS done in the EO email file, here css mainly for the tab display
min-height: 70px;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type, #cadre-legalisation #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type {
height: 60px;
max-height: 60px;
overflow: hidden;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div, #cadre-legalisation #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div {
background-color: #FF9D00;
border-radius: 15px;
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p, #cadre-legalisation #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p {
padding: 0.2rem 0.5rem;
color: white;
margin: 2px;
}
@media only screen and (max-width: 1000px) {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p, #cadre-legalisation #legalisation-conditions > div > sib-display > div sib-multiple[name=tag] > div:first-of-type [name=tag] > div > p {
margin: 2px;
}
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div ftt-display-tweet-argument > div {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div ftt-display-tweet-argument > div, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div ftt-display-tweet-argument > div, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div ftt-display-tweet-argument > div, #cadre-legalisation #legalisation-conditions > div > sib-display > div ftt-display-tweet-argument > div {
cursor: pointer;
}
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div ftt-display-tweet-argument > div p {
#arguments-fin-prohibition #reasons-end-prohibition > div > sib-display > div ftt-display-tweet-argument > div p, #arguments-fin-prohibition #legalisation-conditions > div > sib-display > div ftt-display-tweet-argument > div p, #cadre-legalisation #reasons-end-prohibition > div > sib-display > div ftt-display-tweet-argument > div p, #cadre-legalisation #legalisation-conditions > div > sib-display > div ftt-display-tweet-argument > div p {
text-decoration: underline;
font-style: italic;
}
......
......@@ -13,7 +13,6 @@
width: 30%;
padding: 15px 0px;
margin: 15px auto 0 auto;
min-height: 350px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
......@@ -25,7 +24,7 @@
div:first-child{
background-color: $second-color;
min-height: 200px;
min-height: 250px;
width: 100%;
padding: 15px;
color: white;
......@@ -53,22 +52,22 @@
}
section:nth-child(1){
background-image: $image-one;
//background-image: $image-one;
}
section:nth-child(2){
background-image: $image-two;
background-size: cover;
//background-image: $image-two;
//background-size: cover;
}
section:nth-child(3){
background-image: $image-three;
background-size: cover;
//background-image: $image-three;
//background-size: cover;
}
section:nth-child(odd){
background-color: $main-color;
//background-color: $main-color;
.card{
background-color: $main-color;
......@@ -76,113 +75,112 @@
}
}
section:nth-child(even){
background-color: $second-color;
//background-color: $second-color;
.card{
background-color: $second-color;
box-shadow: -10px 0 10px $main-color;
}
}
.container {
height: 300px;
width: 100%;
top: 60px;
left: calc(50% - 300px);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container {
height: 300px;
width: 100%;
top: 60px;
left: calc(50% - 300px);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.card {
display: flex;
height: 280px;
width: 20%;
border-radius: 10px;
background-color: $main-color;
box-shadow: -10px 0 10px $main-color;
/* margin-left: -50px; */
transition: 0.4s ease-out;
flex-direction: column;
h4,p{
color: black;
}
}
.card:not(:first-child) {
margin-left: -50px;
}
.card:hover {
transform: translateY(-20px);
transition: 0.4s ease-out;
}
.card:hover ~ .card {
position: relative;
left: 50px;
transition: 0.4s ease-out;
}
.title {
color: black;
font-weight: 300;
padding: 15px;
margin: 5px;
min-height: 35px;
}
.bar {
position: absolute;
top: 100px;
left: 20px;
height: 5px;
width: 150px;
}
.emptybar {
background-color: #2e3033;
width: 100%;
height: 100%;
}
.filledbar {
position: absolute;
top: 0px;
z-index: 3;
width: 0px;
height: 100%;
background: rgb(0,154,217);
background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
transition: 0.6s ease-out;
}
.card:hover .filledbar {
width: 120px;
transition: 0.4s ease-out;
}
.circle {
padding: 5px 25px;
}
.stroke {
stroke: white;
stroke-dasharray: 360;
stroke-dashoffset: 360;
transition: 0.6s ease-out;
}
svg {
fill: #17141d;
stroke-width: 2px;
}
.card {
display: flex;
height: 280px;
width: 20%;
border-radius: 10px;
background-color: $main-color;
box-shadow: -10px 0 10px $main-color;
/* margin-left: -50px; */
transition: 0.4s ease-out;
flex-direction: column;
.card:hover .stroke {
stroke-dashoffset: 100;
transition: 0.6s ease-out;