fix responsive behavior for contact, events, structures...

ot_templating/Resources/Private/Layouts/Classic/Contact.html

@@ -17,14 +17,16 @@
             <formvh:render persistenceIdentifier="EXT:ot_templating/Resources/Private/Forms/Contact.form.yaml" />
         </div>
 
-        <h2>Ou par courrier:</h2>
-        <ot:organizations.getById as="organization" organizationId="{settings.organizationId}">
-            <p>
-                {organization.name}<br/>
-                {organization.streetAdress}<br/>
-                {organization.postalCode} {organization.addressCity}
-            </p>
-        </ot:organizations.getById>
+        <div class="postal-adress">
+            <h2><i class="fa fa-envelope" style="margin-right: 6px;"></i>Ou par courrier:</h2>
+            <ot:organizations.getById as="organization" organizationId="{settings.organizationId}">
+                <p>
+                    {organization.name}<br/>
+                    {organization.streetAdress}<br/>
+                    {organization.postalCode} {organization.addressCity}
+                </p>
+            </ot:organizations.getById>
+        </div>
     </div>
 
 </div>

ot_templating/Resources/Public/assets/Classic/style/_states.scss

@@ -35,6 +35,11 @@ $menu-font-color: $menu-font-color;
     margin: 8px 0;
   }
 
+  // Breadcrumb
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   //   Content
   .main {
     flex-direction: column;
@@ -77,6 +82,53 @@ $menu-font-color: $menu-font-color;
     @include flex;
   }
 
+  // Events page
+  .ot-all-events {
+    flex-direction: column;
+
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  // Structures page
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  // Contact form and other forms
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
+
   //   Footer
   #footer {
     height: auto;
@@ -129,6 +181,7 @@ $menu-font-color: $menu-font-color;
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/module/_contact.scss

@@ -13,3 +13,10 @@
   font-style: italic;
   color: #4d4d4d;
 }
+
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}

ot_templating/Resources/Public/assets/Classic/style/module/_forms.scss

@@ -11,11 +11,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
-form .row > div:first-child {
-  padding-left: 0;
+
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {

ot_templating/Resources/Public/assets/Classic/style/style.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-blue.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-green.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-grey.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-light-blue.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-light-red.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-orange.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-purple.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }
 

ot_templating/Resources/Public/assets/Classic/style/theme-red.css

@@ -1507,12 +1507,12 @@ form .row {
 }
 
 form .row > div {
-  padding-left: 2em;
+  padding: 0 0.8em;
   flex: 1;
 }
 
-form .row > div:first-child {
-  padding-left: 0;
+form > .form-group {
+  padding: 0 0.8em;
 }
 
 .form-group {
@@ -1632,6 +1632,13 @@ form button[type=submit]:hover {
   color: #4d4d4d;
 }
 
+.postal-adress {
+  width: 70%;
+  margin: auto;
+  border: solid 1px #cccccc;
+  padding: 1em;
+}
+
 .faq-item .content {
   color: #262626;
   padding: 0 2em;
@@ -1693,6 +1700,10 @@ form button[type=submit]:hover {
     margin: 8px 0;
   }
 
+  .breadcrumb {
+    flex-direction: column;
+  }
+
   .main {
     flex-direction: column;
   }
@@ -1753,6 +1764,47 @@ form button[type=submit]:hover {
     display: flex;
   }
 
+  .ot-all-events {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event {
+    height: auto;
+  }
+
+  .ot-all-events .event-preview {
+    flex-direction: column;
+  }
+
+  .ot-all-events .event-preview .event-poster img {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .ot-all-events .event-preview .event-name {
+    text-align: center;
+  }
+
+  .ot-structures {
+    flex-direction: column;
+  }
+
+  .ot-structures .structure-controls {
+    order: 0;
+  }
+
+  .ot-structures .structure-results {
+    order: 1;
+  }
+
+  form .row {
+    flex-wrap: wrap;
+  }
+
+  .contact-form {
+    min-width: 200px;
+  }
+
   #footer {
     height: auto;
     min-height: 100px;
@@ -1817,6 +1869,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
+    width: 80%;
     height: auto;
   }