structures search mode list ok

assets/style/global.css

@@ -1,759 +1,33 @@
-body {
-  overflow-x: hidden;
+.w100 {
+  width: 100% !important;
 }
 
-a {
-  text-decoration: none;
+.h100 {
+  height: 100% !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 500;
+.flex-order-0 {
+  order: 0;
 }
 
-h1, h2 {
-  padding: 5px;
+.flex-order-1 {
+  order: 1;
 }
 
-h1 {
-  color: #e4611b;
-  font-size: 1.6em;
-  font-weight: 500;
+.flex-order-2 {
+  order: 2;
 }
 
-h2 {
-  color: #333333;
-  font-size: 1.4em;
-  font-weight: 500;
+.flex-order-3 {
+  order: 3;
 }
 
-h3 {
-  color: #333333;
-  font-size: 1.2em;
-  font-weight: 500;
+.flex-order-4 {
+  order: 4;
 }
 
-h4 {
-  color: #333333;
-  font-size: 1.2em;
-  font-weight: 500;
-}
-
-h5 {
-  color: #333333;
-  font-size: 1em;
-  font-weight: 500;
-}
-
-a {
-  color: #e4611b;
-}
-
-a:hover {
-  color: #893a10;
-  text-decoration: underline;
-}
-
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-.text-right {
-  text-align: right;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-table caption {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: #777;
-  text-align: left;
-}
-
-table td, table th {
-  border: 1px solid #ddd;
-  padding: 8px;
-}
-
-table tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-table th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: left;
-  color: #333333;
-}
-
-pre {
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  word-break: break-all;
-  word-wrap: break-word;
-  color: #333333;
-}
-
-img {
-  max-width: 95%;
-  height: auto;
-}
-
-hr {
-  margin: 15px 5px;
-  border-color: #BBB;
-}
-
-.align-center {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.ot-structures-frame, .ot-structures-frame-details {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  font-family: Arial, serif;
-}
-.ot-structures-frame header, .ot-structures-frame-details header {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  width: 100%;
-  align-items: center;
-}
-.ot-structures-frame h2, .ot-structures-frame-details h2 {
-  font-size: 21px;
-  font-weight: 750;
-  flex: 1;
-  text-align: left;
-  color: #e4611b;
-}
-.ot-structures-frame header a, .ot-structures-frame-details header a {
-  padding: 3px;
-  margin: 2px;
-  font-weight: 500;
-}
-.ot-structures-frame input, .ot-structures-frame select, .ot-structures-frame-details input, .ot-structures-frame-details select {
-  height: 36px;
-  border: solid 1px #bfbfbf;
-  border-radius: 0;
-}
-.ot-structures-frame .structure-col, .ot-structures-frame-details .structure-col {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  max-width: 50%;
-  padding: 12px;
-  align-items: center;
-}
-.ot-structures-frame .btn, .ot-structures-frame-details .btn {
-  background-color: #e4611b;
-  border-radius: 4px;
-  padding: 8px;
-  font-weight: 750;
-  color: #ffffff;
-  text-align: center;
-}
-.ot-structures-frame .spacer, .ot-structures-frame-details .spacer {
-  flex: 1;
-}
-
-.ot-structures-frame {
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.ot-structures-frame #structure-map-wrapper {
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  float: left;
-  height: 0;
-}
-.ot-structures-frame #structure-map {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-}
-.ot-structures-frame #structure-map a {
-  text-decoration: none;
-}
-.ot-structures-frame #structure-map-bar {
-  margin: 16px 2% 6px 2%;
-  width: 100%;
-}
-.ot-structures-frame #structure-map-bar .advice {
-  color: #262626;
-  font-weight: 750;
-  text-align: center;
-  font-size: 12px;
-}
-.ot-structures-frame #overseas-provinces-list {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  padding: 0;
-  width: 100%;
-}
-.ot-structures-frame #overseas-provinces-list li {
-  margin: 5px;
-  min-width: 50px;
-  width: 75px;
-  height: 75px;
-}
-.ot-structures-frame #overseas-provinces-list li img {
-  border: solid 1px #000000;
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-.ot-structures-frame .structure-search {
-  width: 100%;
-}
-.ot-structures-frame .structure-search form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.ot-structures-frame .structure-search-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-bottom: 8px;
-}
-.ot-structures-frame .search-bar-wrapper {
-  display: flex;
-  flex-direction: row;
-  height: 30px;
-  padding: 6px 2%;
-  border: solid 1px #bfbfbf;
-  margin: 6px 0;
-  max-width: 44%;
-}
-.ot-structures-frame .search-bar-wrapper:not(:last-child) {
-  margin-right: auto;
-}
-.ot-structures-frame .search-bar {
-  flex: 1;
-  background: none;
-  outline: none;
-  height: auto;
-  font-size: 18px;
-  border: none;
-  width: 95%;
-  min-width: 85%;
-}
-.ot-structures-frame .search-bar-btn {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border: none;
-  background: none;
-  width: 5%;
-  min-width: 24px;
-  padding: 5px;
-  font-size: 18px;
-  cursor: pointer;
-  min-height: 32px;
-}
-.ot-structures-frame .search-bar-btn .fas {
-  color: #8c8c8c;
-}
-.ot-structures-frame .city-search-dropdown {
-  min-width: 100%;
-  position: relative;
-  display: inline-block;
-  top: 10px;
-  left: -100%;
-}
-.ot-structures-frame .city-search-results, .ot-structures-frame .city-search-no-result, .ot-structures-frame .city-search-loading {
-  position: absolute;
-  min-width: 100%;
-  background: #EEEEEE;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-  z-index: 99;
-  top: 100%;
-}
-.ot-structures-frame .city-search-loading img {
-  padding: 10px;
-  width: 30px;
-}
-.ot-structures-frame .city-search-item, .ot-structures-frame .city-search-no-result {
-  display: block;
-  padding: 12px 24px;
-  white-space: nowrap;
-}
-.ot-structures-frame .city-search-item:hover {
-  background-color: #d9d9d9;
-  cursor: pointer;
-}
-.ot-structures-frame .structure-search select {
-  color: #e4611b;
-  padding: 4px 6px;
-  margin: 3px 2%;
-  font-weight: 750;
-  width: 22%;
-  min-width: 110px;
-  font-size: 12px;
-}
-.ot-structures-frame .structure-search select:first-child {
-  margin-left: 0;
-}
-.ot-structures-frame .structure-search select:last-child {
-  margin-right: 0;
-}
-.ot-structures-frame .structure-search .reset-search {
-  background: none;
-  color: #e4611b;
-  margin: 0 6px 6px 0;
-  cursor: pointer;
-  height: 36px;
-  border: solid 2px #e4611b;
-  border-radius: 0;
-}
-.ot-structures-frame .structure-search .submit-search {
-  background-color: #e4611b;
-  color: #ffffff;
-  font-weight: 750;
-  margin: 0 0 6px 6px;
-  cursor: pointer;
-  height: 36px;
+table.no-border td {
   border: none;
-  border-radius: 0;
-}
-.ot-structures-frame .structure-results .structures-page {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.ot-structures-frame .structure-card {
-  display: flex;
-  flex-direction: column;
-  width: 42%;
-  min-width: 200px;
-  border: solid 1px #cccccc;
-  border-radius: 4px;
-  padding: 12px;
-  margin: 8px 1%;
-  background-color: #f2f2f2;
-}
-.ot-structures-frame .structure-poster {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin: 8px;
-  min-width: 160px;
-  height: 80px;
-}
-.ot-structures-frame .structure-poster img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-}
-.ot-structures-frame .structure-details {
-  display: flex;
-  flex-direction: column;
-}
-.ot-structures-frame .structure-details > * {
-  margin: 4px;
-}
-.ot-structures-frame .structure-practices {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  min-height: 18px;
-}
-.ot-structures-frame .structure-practice {
-  background-color: #d9d9d9;
-  color: #262626;
-  font-size: 11px;
-  margin: 1px 4px 1px 0;
-  padding: 1px 5px 3px 5px;
-  height: 16px;
-  border-radius: 6px;
-}
-.ot-structures-frame .structure-name {
-  font-size: 18px;
-  font-weight: 750;
-  width: 100%;
-  text-align: left;
-  color: #e4611b;
-}
-.ot-structures-frame .structure-details-table td {
-  border: none;
-}
-.ot-structures-frame .structure-details-entry {
-  color: #595959;
-}
-.ot-structures-frame .structure-details-entry .fas {
-  color: #e4611b;
-}
-.ot-structures-frame .structure-see {
-  width: 128px;
-  max-height: 28px;
-  padding: 4px;
-  font-weight: 500;
-  margin-top: 8px;
-}
-.ot-structures-frame .structure-see:hover {
-  text-decoration: none;
-  color: white;
-}
-.ot-structures-frame .results-count-message {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  color: #666666;
-  font-size: 0.8em;
-  padding-left: 12px;
-}
-.ot-structures-frame .pagination-bar li a {
-  color: #4d4d4d;
-  font-weight: 600;
-}
-.ot-structures-frame .pagination-bar li.current a {
-  color: #e4611b;
-}
-
-.ot-structures-frame.list-view .structure-col-map {
-  display: none;
-}
-.ot-structures-frame.list-view .search-bar-wrapper {
-  flex: 1;
-  max-width: none;
-}
-.ot-structures-frame.list-view .search-bar-wrapper:not(:last-child) {
-  margin-right: 2%;
-}
-.ot-structures-frame.list-view .structure-search-row.filters {
-  margin: 0 auto 12px auto;
-}
-.ot-structures-frame.list-view .search-bar {
-  flex: 1;
-  max-width: none;
-}
-.ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
-  height: 52px;
-  margin: 3px 0.5%;
-}
-.ot-structures-frame.list-view .filters .reset-search {
-  margin-left: 0;
-}
-.ot-structures-frame.list-view .filters .submit-search {
-  margin-right: 0;
-}
-.ot-structures-frame.list-view .filters select {
-  width: 18.5%;
-}
-.ot-structures-frame.list-view .filters button {
-  width: 10.5%;
-}
-.ot-structures-frame.list-view .structure-col {
-  align-items: normal;
-}
-.ot-structures-frame.list-view .structure-col-results {
-  width: 100%;
-  max-width: 100%;
-}
-.ot-structures-frame.list-view .structure-card {
-  width: 95%;
-  flex-direction: row;
-}
-.ot-structures-frame.list-view .structure-card .spacer {
-  flex: 0;
-}
-.ot-structures-frame.list-view .structure-details {
-  flex: 1;
-}
-.ot-structures-frame.list-view .structure-see {
-  align-self: flex-end;
-}
-
-.ot-structures-frame.map-view .activate-map-view {
-  font-weight: 750;
-}
-
-.ot-structures-frame.list-view .activate-list-view {
-  font-weight: 750;
-}
-
-@media screen and (min-width: 700px) and (max-width: 1048px) {
-  .ot-structures-frame.map-view #overseas-provinces-list li {
-    width: 85px;
-    height: 85px;
-    margin: 5px 12px;
-  }
-  .ot-structures-frame.map-view .structure-search select {
-    margin: 3px 2%;
-    width: 46%;
-  }
-
-  .ot-structures-frame.list-view .structure-search-row {
-    flex-wrap: nowrap;
-  }
-  .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
-    width: 15%;
-    margin: 1%;
-  }
-}
-@media screen and (max-width: 700px) {
-  .ot-structures-frame {
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-  .ot-structures-frame .structure-col {
-    max-width: none;
-    min-width: 100px;
-    overflow: hidden;
-  }
-  .ot-structures-frame .structure-search-row {
-    flex-direction: column;
-  }
-  .ot-structures-frame .search-bar-wrapper {
-    width: 95%;
-    max-width: 95%;
-    margin: 3px auto;
-  }
-  .ot-structures-frame .search-bar-wrapper input {
-    width: auto;
-  }
-  .ot-structures-frame .structure-search select {
-    width: 95%;
-    margin: 3px auto;
-  }
-  .ot-structures-frame .structure-card {
-    width: 100%;
-  }
-
-  .ot-structures-frame.list-view .search-bar-wrapper {
-    width: 85%;
-  }
-  .ot-structures-frame.list-view .structure-card {
-    flex-direction: column;
-  }
-  .ot-structures-frame.list-view .structure-search-row {
-    flex-wrap: nowrap;
-  }
-  .ot-structures-frame.list-view .structure-search-row.filters {
-    margin: 0;
-  }
-  .ot-structures-frame.list-view .filters select, .ot-structures-frame.list-view .filters button {
-    width: 80%;
-    margin: 5px auto;
-  }
-}
-.ot-structures-frame-details {
-  flex-direction: column;
-}
-.ot-structures-frame-details .please-wait {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100vh;
-  justify-content: center;
-  align-items: center;
-}
-.ot-structures-frame-details .content {
-  margin: 18px 10%;
-  max-width: 80%;
-}
-.ot-structures-frame-details header {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-}
-.ot-structures-frame-details header .go-back {
-  margin: 16px;
-  padding: 4px 8px;
-  color: #737373;
-  font-weight: 700;
-}
-.ot-structures-frame-details header h2 {
-  font-size: 14px;
-  flex: 1;
-}
-.ot-structures-frame-details .structure-header {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.ot-structures-frame-details .structure-header > * {
-  margin: 12px;
-}
-.ot-structures-frame-details .structure-header .logo {
-  height: 60px;
-  width: auto;
-}
-.ot-structures-frame-details .structure-header h3 {
-  font-size: 22px;
-  color: #e4611b;
-  font-weight: 750;
-  flex: 1;
-}
-.ot-structures-frame-details .structure-header .social {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.ot-structures-frame-details .structure-header .social a {
-  font-size: 22px;
-  padding: 4px 6px;
-  color: #808080;
-}
-.ot-structures-frame-details .structure-practices {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  margin: 6px auto;
-  padding-bottom: 6px;
-  flex-wrap: wrap;
-  min-height: 18px;
-  justify-content: center;
-  border-bottom: solid 1px #a6a6a6;
-}
-.ot-structures-frame-details .structure-practice {
-  background-color: #d9d9d9;
-  color: #262626;
-  font-size: 11px;
-  margin: 1px 4px 1px 0;
-  padding: 1px 5px 3px 5px;
-  height: 16px;
-  border-radius: 6px;
-}
-.ot-structures-frame-details .illustration-container {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-  margin: 40px 20%;
-  justify-content: center;
-}
-.ot-structures-frame-details .illustration-container img {
-  max-height: 180px;
-  width: auto;
-}
-.ot-structures-frame-details .practices-tags {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-}
-.ot-structures-frame-details .details {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  color: #666666;
-}
-.ot-structures-frame-details .details h4 {
-  font-size: 18px;
-  font-weight: 750;
-  border-bottom: solid 1px #e4611b;
-  align-self: flex-start;
-  color: #666666;
-  margin: 8px 0;
-}
-.ot-structures-frame-details .details .description {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  border-right: solid 2px #e4611b;
-  width: 45%;
-  padding-right: 5%;
-}
-.ot-structures-frame-details .details .contact {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: column;
-  width: 45%;
-  padding-left: 5%;
-}
-.ot-structures-frame-details .details .contact td {
-  background: none;
-  border: none;
-  width: 80%;
-}
-.ot-structures-frame-details .details .contact td:first-child {
-  width: 20%;
-  color: #e4611b;
-}
-.ot-structures-frame-details .spot-on-bar {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  flex-direction: row;
-}
-.ot-structures-frame-details #structure-details-map {
-  height: 300px;
-  margin-top: 45px;
 }
 
 /*# sourceMappingURL=global.css.map */

assets/style/global.scss

@@ -1,852 +1,18 @@
-@import "mixins";
 
-$theme-color-1: #e4611b;
-
-$btn-background-color: $theme-color-1;
-$btn-text-color: #ffffff;
-$input-border-color: #bfbfbf;
-$content-h1-color: $theme-color-1;
-$content-h2-color: #333333;
-$content-h3-color: #333333;
-$content-h4-color: #333333;
-$content-h5-color: #333333;
-$content-h1-size: 1.6em;
-$content-h1-weight: 500;
-$content-h2-size: 1.4em;
-$content-h2-weight: 500;
-$content-h3-size: 1.2em;
-$content-h3-weight: 500;
-$content-h4-size: 1.2em;
-$content-h4-weight: 500;
-$content-h5-size: 1em;
-$content-h5-weight: 500;
-$content-a-color: $theme-color-1;
-
-body {
-  overflow-x: hidden;
-}
-
-a {
-  text-decoration: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 500;
-}
-
-h1, h2 {
-  padding: 5px;
-}
-
-h1 {
-  color: $content-h1-color;
-  font-size: $content-h1-size;
-  font-weight: $content-h1-weight;
-}
-
-h2 {
-  color: $content-h2-color;
-  font-size: $content-h2-size;
-  font-weight: $content-h2-weight;
-}
-
-h3 {
-  color: $content-h3-color;
-  font-size: $content-h3-size;
-  font-weight: $content-h3-weight;
-}
-
-h4 {
-  color: $content-h4-color;
-  font-size: $content-h4-size;
-  font-weight: $content-h4-weight;
-}
-
-h5 {
-  color: $content-h5-color;
-  font-size: $content-h5-size;
-  font-weight: $content-h5-weight;
-}
-
-a {
-  color: $content-a-color;
-}
-
-a:hover {
-  color: darken($content-a-color, 20%);
-  text-decoration: underline;
-}
-
-p {
-  padding: 5px;
-  margin: 0 0 10px;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-.text-right {
-  text-align: right;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-table caption {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: #777;
-  text-align: left;
-}
-
-table td, table th {
-  border: 1px solid #ddd;
-  padding: 8px;
-}
-
-table tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-table th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: left;
-  color: #333333;
-}
-
-pre {
-  display: block;
-  padding: 9.5px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  word-break: break-all;
-  word-wrap: break-word;
-  color: #333333;
-}
-
-img {
-  max-width: 95%;
-  height: auto;
-}
-
-hr {
-  margin: 15px 5px;
-  border-color: #BBB;
-}
-
-.align-center {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-
-.ot-structures-frame, .ot-structures-frame-details {
-  @include flexbox;
-  font-family: Arial, serif;
-
-  header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    width: 100%;
-    align-items: center;
-  }
-
-  h2 {
-    font-size: 21px;
-    font-weight: 750;
-    flex: 1;
-    text-align: left;
-    color: $btn-background-color;
-  }
-
-  header a {
-    padding: 3px;
-    margin: 2px;
-    font-weight: 500;
-  }
-
-  input, select {
-    height: 36px;
-    border: solid 1px $input-border-color;
-    border-radius: 0;
-  }
-
-  .structure-col {
-    @include flexbox;
-    flex-direction: column;
-    flex: 1;
-    max-width: 50%;
-    padding: 12px;
-    align-items: center;
-  }
-
-  .btn {
-    background-color: $btn-background-color;
-    border-radius: 4px;
-    padding: 8px;
-    font-weight: 750;
-    color: $btn-text-color;
-    text-align: center;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-}
-
-.ot-structures-frame {
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  // The wrapper role is to maintain the map's height equal to its width
-  // @see https://stackoverflow.com/a/14896313/4279120
-  #structure-map-wrapper {
-    position: relative;
-    width: 100%;
-    padding-bottom: 100%;
-    float: left;
-    height: 0;
-  }
-
-  #structure-map {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-  }
-
-  #structure-map a {
-    text-decoration: none;
-  }
-
-  #structure-map-bar {
-    margin: 16px 2% 6px 2%;
-    width: 100%;
-  }
-
-  #structure-map-bar .advice {
-    color: #262626;
-    font-weight: 750;
-    text-align: center;
-    font-size: 12px;
-  }
-
-  #overseas-provinces-list {
-    @include flexbox;
-    flex-direction: row;
-    list-style: none;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding: 0;
-    width: 100%;
-  }
-
-  #overseas-provinces-list li {
-    margin: 5px;
-    min-width: 50px;
-    width: 75px;
-    height: 75px;
-  }
-
-  #overseas-provinces-list li img {
-    border: solid 1px #000000;
-    max-width: 100%;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  .structure-search {
-    width: 100%;
-  }
-
-  .structure-search form {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .structure-search-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-bottom: 8px;
-  }
-
-  .search-bar-wrapper {
-    display: flex;
-    flex-direction: row;
-    height: 30px;
-    padding: 6px 2%;
-    border: solid 1px $input-border-color;
-    margin: 6px 0;
-    max-width: 44%;
-  }
-
-  .search-bar-wrapper:not(:last-child) {
-    margin-right: auto;
-  }
-
-  .search-bar {
-    flex: 1;
-    background: none;
-    outline: none;
-    height: auto;
-    font-size: 18px;
-    border: none;
-    width: 95%;
-    min-width: 85%;
-  }
-
-  .search-bar-btn {
-    @include flexbox;
-    flex-direction: column;
-    justify-content: center;
-    border: none;
-    background: none;
-    width: 5%;
-    min-width: 24px;
-    padding: 5px;
-    font-size: 18px;
-    cursor: pointer;
-    min-height: 32px;
-  }
-
-  .search-bar-btn .fas {
-    color: darken($input-border-color, 20);
-  }
-
-  .city-search-dropdown {
-    min-width: 100%;
-    position: relative;
-    display: inline-block;
-    top: 10px;
-    left: -100%;
-  }
-
-  .city-search-results, .city-search-no-result, .city-search-loading {
-    position: absolute;
-    min-width: 100%;
-    background: #EEEEEE;
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-    z-index: 99;
-    top: 100%;
-  }
-
-  .city-search-loading img {
-    padding:10px;
-    width:30px;
-  }
-
-  .city-search-item, .city-search-no-result {
-    display: block;
-    padding: 12px 24px;
-    white-space: nowrap;
-  }
-
-  .city-search-item:hover {
-    background-color: #d9d9d9;
-    cursor: pointer;
-  }
-
-  .structure-search select {
-    color: $btn-background-color;
-    padding: 4px 6px;
-    margin: 3px 2%;
-    font-weight: 750;
-    width: 22%;
-    min-width: 110px;
-    font-size: 12px;
-  }
-
-  .structure-search select:first-child {
-    margin-left: 0;
-  }
-  .structure-search select:last-child {
-    margin-right: 0;
-  }
-
-  .structure-search .reset-search {
-    background: none;
-    color: $btn-background-color;
-    margin: 0 6px 6px 0;
-    cursor: pointer;
-    height: 36px;
-    border: solid 2px $btn-background-color;
-    border-radius: 0;
-  }
-
-  .structure-search .submit-search {
-    background-color: $btn-background-color;
-    color: $btn-text-color;
-    font-weight: 750;
-    margin: 0 0 6px 6px;
-    cursor: pointer;
-    height: 36px;
-    border: none;
-    border-radius: 0;
-  }
-
-  .structure-results .structures-page {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  .structure-card {
-    display: flex;
-    flex-direction: column;
-    width: 42%;
-    min-width: 200px;
-    border: solid 1px #cccccc;
-    border-radius: 4px;
-    padding: 12px;
-    margin: 8px 1%;
-    background-color: #f2f2f2;
-  }
-
-  .structure-poster {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    margin: 8px;
-    min-width: 160px;
-    height: 80px;
-  }
-
-  .structure-poster img {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-  }
-
-  .structure-details {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .structure-details > * {
-    margin: 4px;
-  }
-
-  .structure-practices {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    min-height: 18px;
-  }
-
-  .structure-practice {
-    background-color: #d9d9d9;
-    color: #262626;
-    font-size: 11px;
-    margin: 1px 4px 1px 0;
-    padding: 1px 5px 3px 5px;
-    height: 16px;
-    border-radius: 6px;
-  }
-
-  .structure-name {
-    font-size: 18px;
-    font-weight: 750;
-    width: 100%;
-    text-align: left;
-    color: $btn-background-color;
-  }
-
-  .structure-details-table td {
-    border:none;
-  }
-
-  .structure-details-entry {
-    color: #595959;
-  }
-
-  .structure-details-entry .fas {
-    color: $btn-background-color;
-  }
-
-  .structure-see {
-    width: 128px;
-    max-height: 28px;
-    padding: 4px;
-    font-weight: 500;
-    margin-top: 8px;
-  }
-
-  .structure-see:hover {
-    text-decoration: none;
-    color: white;
-  }
-
-  .results-count-message {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    color: #666666;
-    font-size: 0.8em;
-    padding-left: 12px;
-  }
-
-  .pagination-bar {
-    li a {
-      color: #4d4d4d;
-      font-weight: 600;
-    }
-
-    li.current a {
-      color: $btn-background-color;
-    }
-  }
-}
-
-.ot-structures-frame.list-view {
-  // List view changes
-
-  .structure-col-map {
-    display: none;
-  }
-
-  .structure-search form .search-buttons {
-  }
-
-  .search-bar-wrapper {
-    flex: 1;
-    max-width: none;
-  }
-
-  .search-bar-wrapper:not(:last-child) {
-    margin-right: 2%;
-  }
-
-  .structure-search-row.filters {
-    margin: 0 auto 12px auto;
-  }
-
-  .search-bar {
-    flex: 1;
-    max-width: none;
-  }
-
-  .filters select, .filters button {
-    height: 52px;
-    margin: 3px 0.5%;
-  }
-
-  .filters .reset-search {
-    margin-left: 0;
-  }
-
-  .filters .submit-search {
-    margin-right: 0;
-  }
-
-  .filters select {
-    width: 18.5%;
-  }
-
-  .filters button {
-    width: 10.5%;
-  }
-
-  .structure-col {
-    align-items: normal;
-  }
-
-  .structure-col-results {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .structure-card {
-    width: 95%;
-    flex-direction: row;
-  }
-
-  .structure-card .spacer {
-    flex: 0; // disable spacer in list view
-  }
-
-  .structure-details {
-    flex: 1;
-  }
-
-  .structure-see {
-    align-self: flex-end;
-  }
-}
-
-.ot-structures-frame.map-view .activate-map-view {
-  font-weight: 750;
+.w100 {
+  width: 100% !important;
 }
-.ot-structures-frame.list-view .activate-list-view {
-  font-weight: 750;
-}
-
-// Medium screens
-@media screen and (min-width: 700px) and (max-width: 1048px) {
-  .ot-structures-frame.map-view {
-    #overseas-provinces-list li {
-      width: 85px;
-      height: 85px;
-      margin: 5px 12px;
-    }
-
-    .structure-search select {
-      margin: 3px 2%;
-      width: 46%;
-    }
-  }
 
-  .ot-structures-frame.list-view {
-    .structure-search-row {
-      flex-wrap: nowrap;
-    }
-
-    .filters {
-      select, button {
-        width: 15%;
-        margin: 1%;
-      }
-    }
-  }
+.h100 {
+  height: 100% !important;
 }
 
+.flex-order-0 { order: 0; }
+.flex-order-1 { order: 1; }
+.flex-order-2 { order: 2; }
+.flex-order-3 { order: 3; }
+.flex-order-4 { order: 4; }
 
-// Small screens
-@media screen and (max-width: 700px) {
-  .ot-structures-frame {
-    flex-direction: column;
-    flex-wrap: nowrap;
-
-    .structure-col {
-      max-width: none;
-
-      // prevents content to be higher than the container
-      min-width: 100px;
-      overflow: hidden;
-    }
-
-    .structure-search-row {
-      flex-direction: column;
-    }
-
-    .search-bar-wrapper {
-      width: 95%;
-      max-width: 95%;
-      margin: 3px auto;
-    }
-
-    .search-bar-wrapper input {
-      width: auto;
-    }
-
-    .structure-search select {
-      width: 95%;
-      margin: 3px auto;
-    }
-
-    .structure-card {
-      width: 100%;
-    }
-  }
-  .ot-structures-frame.list-view {
-
-    .search-bar-wrapper {
-      width: 85%;
-    }
-
-    .structure-card {
-      flex-direction: column;
-    }
-
-    .structure-search-row {
-      flex-wrap: nowrap;
-    }
-
-    .structure-search-row.filters {
-      margin: 0;
-    }
-
-    .filters {
-      select, button {
-        width: 80%;
-        margin: 5px auto;
-      }
-    }
-  }
-}
-
-.ot-structures-frame-details {
-  flex-direction: column;
-
-  .please-wait {
-    @include flexbox;
-    flex-direction: row;
-    width: 100%;
-    height: 100vh;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .content {
-    margin: 18px 10%;
-    max-width: 80%;
-  }
-
-  header {
-    @include flexbox;
-    flex-direction: row;
-
-    .go-back {
-      margin: 16px;
-      padding: 4px 8px;
-      color: #737373;
-      font-weight: 700;
-    }
-
-    h2 {
-      font-size: 14px;
-      flex: 1
-    }
-  }
-
-  .structure-header {
-    @include flexbox;
-    flex-direction: row;
-    align-items: center;
-
-    >* {
-      margin: 12px;
-    }
-
-    .logo {
-      height: 60px;
-      width: auto;
-    }
-
-    h3 {
-      font-size: 22px;
-      color: $btn-background-color;
-      font-weight: 750;
-      flex: 1;
-    }
-
-    .social {
-      @include flexbox;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .social a {
-      font-size: 22px;
-      padding: 4px 6px;
-      color: #808080;
-    }
-  }
-
-  .structure-practices {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    margin: 6px auto;
-    padding-bottom: 6px;
-    flex-wrap: wrap;
-    min-height: 18px;
-    justify-content: center;
-    border-bottom: solid 1px #a6a6a6;
-  }
-
-  .structure-practice {
-    background-color: #d9d9d9;
-    color: #262626;
-    font-size: 11px;
-    margin: 1px 4px 1px 0;
-    padding: 1px 5px 3px 5px;
-    height: 16px;
-    border-radius: 6px;
-  }
-
-  .illustration-container {
-    @include flexbox;
-    flex-direction: row;
-    margin: 40px 20%;
-    justify-content: center;
-
-    img {
-      max-height: 180px;
-      width: auto;
-    }
-  }
-
-  .practices-tags {
-    @include flexbox;
-    flex-direction: row;
-  }
-
-  .details {
-    @include flexbox;
-    flex-direction: row;
-    max-width: 100%;
-    color: #666666;
-
-    h4 {
-      font-size: 18px;
-      font-weight: 750;
-      border-bottom: solid 1px $btn-background-color;
-      align-self: flex-start;
-      color: #666666;
-      margin: 8px 0;
-    }
-
-    .description {
-      @include flexbox;
-      flex-direction: column;
-      border-right: solid 2px $btn-background-color;
-      width: 45%;
-      padding-right: 5%;
-    }
-    .contact {
-      @include flexbox;
-      flex-direction: column;
-      width: 45%;
-      padding-left: 5%;
-    }
-
-    .contact td {
-      background: none;
-      border: none;
-      width: 80%;
-    }
-    .contact td:first-child {
-      width: 20%;
-      color: $btn-background-color;
-    }
-  }
-
-  .spot-on-bar {
-    @include flexbox;
-    flex-direction: row;
-  }
-
-  #structure-details-map {
-    height: 300px;
-    margin-top: 45px;
-  }
-
+table.no-border td {
+  border: none;
 }

assets/style/variables.scss

@@ -2,3 +2,6 @@
 //
 // The variables you want to modify
 // $font-size-root: 20px;
+
+
+$theme: #e4611b;

components/Ui/Search/Address.vue

@@ -3,7 +3,8 @@
     type="text"
     name="search-city"
     class="search-bar"
-    :placeholder="$t('what') + ' ?'"
+    outlined
+    :label="$t('where') + ' ?'"
     autocomplete="off"
   >
     <button
@@ -28,3 +29,9 @@
     <input type="hidden" name="long" value="{ot:request.getArgument(argument: 'long')}">
   </v-text-field>
 </template>
+
+<style>
+.v-input__control {
+  height: 56px;
+}
+</style>

components/Ui/Search/Text.vue

@@ -4,7 +4,8 @@
       type="text"
       class="search-bar"
       name="search-query"
-      :placeholder="$t('what') + ' ?'"
+      outlined
+      :label="$t('what') + ' ?'"
     >
       <button
         class="search-bar-btn"
@@ -15,3 +16,9 @@
     </v-text-field>
   </div>
 </template>
+
+<style>
+.v-input__control {
+  height: 56px;
+}
+</style>

components/Ui/Select/Department.vue

@@ -4,117 +4,118 @@
     item-value="code"
     item-text="label"
     :label="$t('department')"
+    filled
   />
 </template>
 
 <script>
-const departments = [
-  { code: '01', label: '01 - Ain' },
-  { code: '02', label: '02 - Aisne' },
-  { code: '03', label: '03 - Allier' },
-  { code: '04', label: '04 - Alpes-de-Haute-Provence' },
-  { code: '05', label: '05 - Hautes-Alpes' },
-  { code: '06', label: '06 - Alpes-Maritimes' },
-  { code: '07', label: '07 - Ardèche' },
-  { code: '08', label: '08 - Ardennes' },
-  { code: '09', label: '09 - Ariège' },
-  { code: '10', label: '10 - Aube' },
-  { code: '11', label: '11 - Aude' },
-  { code: '12', label: '12 - Aveyron' },
-  { code: '13', label: '13 - Bouches-du-Rhône' },
-  { code: '14', label: '14 - Calvados' },
-  { code: '15', label: '15 - Cantal' },
-  { code: '16', label: '16 - Charente' },
-  { code: '17', label: '17 - Charente-Maritime' },
-  { code: '18', label: '18 - Cher' },
-  { code: '19', label: '19 - Corrèze' },
-  { code: '2A', label: '2A - Corse-du-Sud' },
-  { code: '2B', label: '2B - Haute-Corse' },
-  { code: '21', label: '21 - Côte-d\'Or' },
-  { code: '22', label: '22 - Côtes-d\'Armor' },
-  { code: '23', label: '23 - Creuse' },
-  { code: '24', label: '24 - Dordogne' },
-  { code: '25', label: '25 - Doubs' },
-  { code: '26', label: '26 - Drôme' },
-  { code: '27', label: '27 - Eure' },
-  { code: '28', label: '28 - Eure-et-Loir' },
-  { code: '29', label: '29 - Finistère' },
-  { code: '30', label: '30 - Gard' },
-  { code: '31', label: '31 - Haute-Garonne' },
-  { code: '32', label: '32 - Gers' },
-  { code: '33', label: '33 - Gironde' },
-  { code: '34', label: '34 - Hérault' },
-  { code: '35', label: '35 - Ille-et-Vilaine' },
-  { code: '36', label: '36 - Indre' },
-  { code: '37', label: '37 - Indre-et-Loire' },
-  { code: '38', label: '38 - Isère' },
-  { code: '39', label: '39 - Jura' },
-  { code: '40', label: '40 - Landes' },
-  { code: '41', label: '41 - Loir-et-Cher' },
-  { code: '42', label: '42 - Loire' },
-  { code: '43', label: '43 - Haute-Loire' },
-  { code: '44', label: '44 - Loire-Atlantique' },
-  { code: '45', label: '45 - Loiret' },
-  { code: '46', label: '46 - Lot' },
-  { code: '47', label: '47 - Lot-et-Garonne' },
-  { code: '48', label: '48 - Lozère' },
-  { code: '49', label: '49 - Maine-et-Loire' },
-  { code: '50', label: '50 - Manche' },
-  { code: '51', label: '51 - Marne' },
-  { code: '52', label: '52 - Haute-Marne' },
-  { code: '53', label: '53 - Mayenne' },
-  { code: '54', label: '54 - Meurthe-et-Moselle' },
-  { code: '55', label: '55 - Meuse' },
-  { code: '56', label: '56 - Morbihan' },
-  { code: '57', label: '57 - Moselle' },
-  { code: '58', label: '58 - Nièvre' },
-  { code: '59', label: '59 - Nord' },
-  { code: '60', label: '60 - Oise' },
-  { code: '61', label: '61 - Orne' },
-  { code: '62', label: '62 - Pas-de-Calais' },
-  { code: '63', label: '63 - Puy-de-Dôme' },
-  { code: '64', label: '64 - Pyrénées-Atlantiques' },
-  { code: '65', label: '65 - Hautes-Pyrénées' },
-  { code: '66', label: '66 - Pyrénées-Orientales' },
-  { code: '67', label: '67 - Bas-Rhin' },
-  { code: '68', label: '68 - Haut-Rhin' },
-  { code: '69', label: '69 - Rhône' },
-  { code: '70', label: '70 - Haute-Saône' },
-  { code: '71', label: '71 - Saône-et-Loire' },
-  { code: '72', label: '72 - Sarthe' },
-  { code: '73', label: '73 - Savoie' },
-  { code: '74', label: '74 - Haute-Savoie' },
-  { code: '75', label: '75 - Paris' },
-  { code: '76', label: '76 - Seine-Maritime' },
-  { code: '77', label: '77 - Seine-et-Marne' },
-  { code: '78', label: '78 - Yvelines' },
-  { code: '79', label: '79 - Deux-Sèvres' },
-  { code: '80', label: '80 - Somme' },
-  { code: '81', label: '81 - Tarn' },
-  { code: '82', label: '82 - Tarn-et-Garonne' },
-  { code: '83', label: '83 - Var' },
-  { code: '84', label: '84 - Vaucluse' },
-  { code: '85', label: '85 - Vendée' },
-  { code: '86', label: '86 - Vienne' },
-  { code: '87', label: '87 - Haute-Vienne' },
-  { code: '88', label: '88 - Vosges' },
-  { code: '89', label: '89 - Yonne' },
-  { code: '90', label: '90 - Territoire de Belfort' },
-  { code: '91', label: '91 - Essonne' },
-  { code: '92', label: '92 - Hauts-de-Seine' },
-  { code: '93', label: '93 - Seine-Saint-Denis' },
-  { code: '94', label: '94 - Val-de-Marne' },
-  { code: '95', label: '95 - Val-d\'Oise' },
-  { code: '971', label: '971 - Guadeloupe' },
-  { code: '972', label: '972 - Martinique' },
-  { code: '973', label: '973 - Guyane' },
-  { code: '974', label: '974 - La Réunion' },
-  { code: '976', label: '976 - Mayotte' }
-]
-
 export default {
   data () {
-    this.departments = departments
+    return {
+      departments: [
+        { code: '01', label: '01 - Ain' },
+        { code: '02', label: '02 - Aisne' },
+        { code: '03', label: '03 - Allier' },
+        { code: '04', label: '04 - Alpes-de-Haute-Provence' },
+        { code: '05', label: '05 - Hautes-Alpes' },
+        { code: '06', label: '06 - Alpes-Maritimes' },
+        { code: '07', label: '07 - Ardèche' },
+        { code: '08', label: '08 - Ardennes' },
+        { code: '09', label: '09 - Ariège' },
+        { code: '10', label: '10 - Aube' },
+        { code: '11', label: '11 - Aude' },
+        { code: '12', label: '12 - Aveyron' },
+        { code: '13', label: '13 - Bouches-du-Rhône' },
+        { code: '14', label: '14 - Calvados' },
+        { code: '15', label: '15 - Cantal' },
+        { code: '16', label: '16 - Charente' },
+        { code: '17', label: '17 - Charente-Maritime' },
+        { code: '18', label: '18 - Cher' },
+        { code: '19', label: '19 - Corrèze' },
+        { code: '2A', label: '2A - Corse-du-Sud' },
+        { code: '2B', label: '2B - Haute-Corse' },
+        { code: '21', label: '21 - Côte-d\'Or' },
+        { code: '22', label: '22 - Côtes-d\'Armor' },
+        { code: '23', label: '23 - Creuse' },
+        { code: '24', label: '24 - Dordogne' },
+        { code: '25', label: '25 - Doubs' },
+        { code: '26', label: '26 - Drôme' },
+        { code: '27', label: '27 - Eure' },
+        { code: '28', label: '28 - Eure-et-Loir' },
+        { code: '29', label: '29 - Finistère' },
+        { code: '30', label: '30 - Gard' },
+        { code: '31', label: '31 - Haute-Garonne' },
+        { code: '32', label: '32 - Gers' },
+        { code: '33', label: '33 - Gironde' },
+        { code: '34', label: '34 - Hérault' },
+        { code: '35', label: '35 - Ille-et-Vilaine' },
+        { code: '36', label: '36 - Indre' },
+        { code: '37', label: '37 - Indre-et-Loire' },
+        { code: '38', label: '38 - Isère' },
+        { code: '39', label: '39 - Jura' },
+        { code: '40', label: '40 - Landes' },
+        { code: '41', label: '41 - Loir-et-Cher' },
+        { code: '42', label: '42 - Loire' },
+        { code: '43', label: '43 - Haute-Loire' },
+        { code: '44', label: '44 - Loire-Atlantique' },
+        { code: '45', label: '45 - Loiret' },
+        { code: '46', label: '46 - Lot' },
+        { code: '47', label: '47 - Lot-et-Garonne' },
+        { code: '48', label: '48 - Lozère' },
+        { code: '49', label: '49 - Maine-et-Loire' },
+        { code: '50', label: '50 - Manche' },
+        { code: '51', label: '51 - Marne' },
+        { code: '52', label: '52 - Haute-Marne' },
+        { code: '53', label: '53 - Mayenne' },
+        { code: '54', label: '54 - Meurthe-et-Moselle' },
+        { code: '55', label: '55 - Meuse' },
+        { code: '56', label: '56 - Morbihan' },
+        { code: '57', label: '57 - Moselle' },
+        { code: '58', label: '58 - Nièvre' },
+        { code: '59', label: '59 - Nord' },
+        { code: '60', label: '60 - Oise' },
+        { code: '61', label: '61 - Orne' },
+        { code: '62', label: '62 - Pas-de-Calais' },
+        { code: '63', label: '63 - Puy-de-Dôme' },
+        { code: '64', label: '64 - Pyrénées-Atlantiques' },
+        { code: '65', label: '65 - Hautes-Pyrénées' },
+        { code: '66', label: '66 - Pyrénées-Orientales' },
+        { code: '67', label: '67 - Bas-Rhin' },
+        { code: '68', label: '68 - Haut-Rhin' },
+        { code: '69', label: '69 - Rhône' },
+        { code: '70', label: '70 - Haute-Saône' },
+        { code: '71', label: '71 - Saône-et-Loire' },
+        { code: '72', label: '72 - Sarthe' },
+        { code: '73', label: '73 - Savoie' },
+        { code: '74', label: '74 - Haute-Savoie' },
+        { code: '75', label: '75 - Paris' },
+        { code: '76', label: '76 - Seine-Maritime' },
+        { code: '77', label: '77 - Seine-et-Marne' },
+        { code: '78', label: '78 - Yvelines' },
+        { code: '79', label: '79 - Deux-Sèvres' },
+        { code: '80', label: '80 - Somme' },
+        { code: '81', label: '81 - Tarn' },
+        { code: '82', label: '82 - Tarn-et-Garonne' },
+        { code: '83', label: '83 - Var' },
+        { code: '84', label: '84 - Vaucluse' },
+        { code: '85', label: '85 - Vendée' },
+        { code: '86', label: '86 - Vienne' },
+        { code: '87', label: '87 - Haute-Vienne' },
+        { code: '88', label: '88 - Vosges' },
+        { code: '89', label: '89 - Yonne' },
+        { code: '90', label: '90 - Territoire de Belfort' },
+        { code: '91', label: '91 - Essonne' },
+        { code: '92', label: '92 - Hauts-de-Seine' },
+        { code: '93', label: '93 - Seine-Saint-Denis' },
+        { code: '94', label: '94 - Val-de-Marne' },
+        { code: '95', label: '95 - Val-d\'Oise' },
+        { code: '971', label: '971 - Guadeloupe' },
+        { code: '972', label: '972 - Martinique' },
+        { code: '973', label: '973 - Guyane' },
+        { code: '974', label: '974 - La Réunion' },
+        { code: '976', label: '976 - Mayotte' }
+      ]
+    }
   }
 }
 </script>

lang/fr-FR.js

@@ -1,6 +1,6 @@
 export default (_context, _locale) => {
   return ({
-    member_companies: 'Structures adhérentes',
+    member_companies: 'Nos Structures adhérentes',
     map: 'Carte',
     list: 'Liste',
     no_result: 'Aucun résultat',
@@ -22,6 +22,45 @@ export default (_context, _locale) => {
     department: 'Département',
     distance: 'Distance',
     federation: 'Fédération',
-    type: 'Type'
+    type: 'Type',
+    reinitialize: 'Réinitialiser',
+    search: 'Rechercher',
+    BIG_BAND: 'Big band',
+    BRASS_BAND: 'Brass band',
+    ORCHESTRA_CLASS: "Classe d'orchestre",
+    ACCORDION_ORCHESTRA: "Orchestre d'accordéons",
+    HARMONY_ORCHESTRA: "Orchestre d'harmonie",
+    PHILHARMONIC_ORCHESTRA: 'Orchestre philharmonique',
+    SYMPHONY_ORCHESTRA: 'Orchestre symphonique',
+    STRING_ORCHESTRA: 'Orchestre à cordes',
+    PLUCKED_ORCHESTRA: 'Orchestre à plectres',
+    FANFARE_BAND: 'Orchestre de fanfare',
+    BAGAD: 'Bagad',
+    BANDAS: 'Bandas ou Fanfare de rue',
+    BATTERY_FANFARE: 'Batterie fanfare',
+    BATTUCADA: 'Battucada',
+    FOLKLORIC_BAND: 'Ensemble folklorique',
+    FIFE_AND_DRUM: 'Fifres et tambours',
+    MARCHING_BAND: 'Marching band ou Show parade',
+    HUNTING_HORNS: 'Trompes de chasse',
+    CHILDRENS_CHOIR: "Choeur d'enfants",
+    FEMAL_CHOIR: 'Choeur de femmes',
+    MENS_CHOIR: "Choeur d'hommes",
+    MIXED_CHORUS: 'Choeur mixte',
+    VOCAL_BAND_UP_16: "Ensemble vocal (jusqu'à 16)",
+    CLARINET_CHOIR: 'Ensemble de clarinettes',
+    COPPER_BAND: 'Ensemble de cuivres',
+    FLUTE_ENSEMBLE: 'Ensemble de flûtes',
+    SAXOPHONES_BAND: 'Ensemble de saxophones',
+    VIOLIN_BAND: 'Ensemble de violons',
+    PERCUSSION_BAND: 'Ensemble de percussions',
+    CURRENT_MUSIC_GROUP: 'Groupe de Musique actuelle',
+    CHAMBER_MUSIC_ENSEMBLE: 'Ensemble de Musique de chambre',
+    TRADITIONAL_MUSIC_ENSEMBLE: 'Ensemble de Musique traditionnelle',
+    JAZZ_BAND: 'Ensemble de Jazz',
+    EDUCATION: 'Enseignement',
+    CHEERLEADER: 'Majorettes',
+    TROOP: 'Troupe',
+    OTHER: 'Autre'
   })
 }

nuxt.config.js

@@ -23,7 +23,7 @@ export default {
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
-    // '~/assets/style/global.scss'
+    '~/assets/style/global.scss'
   ],
 
   i18n: {
@@ -77,6 +77,7 @@ export default {
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
     customVariables: ['~/assets/style/variables.scss'],
+    treeShake: true,
     theme: {
       dark: false,
       themes: {

pages/structures_adherentes/index.vue

@@ -4,9 +4,11 @@
   <LayoutContainer class="map-view">
     <!-- Header -->
     <v-row>
-      <v-col cols="12" class="d-flex">
-        <h2 style="flex: 1;">{{ $t("member_companies") }}</h2>
-        <v-btn-toggle mandatory>
+      <v-layout>
+        <h2 style="flex: 1;">
+          {{ $t("member_companies") }}
+        </h2>
+        <v-btn-toggle mandatory dense @change="viewChanged">
           <v-btn>
             {{ $t("map") }}
           </v-btn>
@@ -14,77 +16,81 @@
             {{ $t("list") }}
           </v-btn>
         </v-btn-toggle>
-      </v-col>
+      </v-layout>
     </v-row>
 
     <v-row>
       <!-- Map Column (hidden in 'list-view' mode)-->
-      <v-col cols="6">
+      <v-col v-show="mapview" cols="6">
         <UiMapStructures />
       </v-col>
 
       <!-- Results column -->
-      <v-col cols="6">
+      <v-col :cols="mapview ? 6 : 12">
         <!-- Search form -->
         <v-row>
-          <v-form method="get">
+          <v-form method="get" class="mt-8 w100">
             <v-row>
-              <v-col cols="6">
+              <v-col cols="6" class="py-2 px-1">
                 <UiSearchText />
               </v-col>
 
-              <v-col cols="6">
+              <v-col cols="6" class="py-2 px-1">
                 <UiSearchAddress />
               </v-col>
             </v-row>
 
-            <v-row class="filters">
-              <v-col cols="3">
-                <v-select
-                  :label="$t('type')"
-                  disabled
-                  solo
-                />
-              </v-col>
-              <v-col cols="3">
-                <UiSelectDepartment />
-              </v-col>
-              <v-col cols="3">
-                <v-select
-                  :label="$t('federation')"
-                  disabled
-                  solo
-                />
-              </v-col>
-              <v-col cols="3">
-                <v-select
-                  :label="$t('distance')"
-                  :items="[
-                    {distance: 10, label: '10km'},
-                    {distance: 30, label: '30km'},
-                    {distance: 100, label: '100km'},
-                    {distance: 200, label: '200km'}
-                  ]"
-                  item-value="distance"
-                  item-text="label"
-                  solo
-                />
-              </v-col>
-            </v-row>
-
             <v-row>
-              <v-col cols="3">
-                <v-btn>
-                  Réinitialiser
+              <v-col v-if="listview" cols="2" class="py-2 px-1">
+                <v-btn class="h100">
+                  {{ $t('reinitialize') }}
                 </v-btn>
               </v-col>
-              <v-col cols="6" class="spacer" />
-              <v-col cols="3">
-                <v-btn>
-                  Rechercher
+              <v-col :cols="listview ? 8 : 12">
+                <v-row class="filters">
+                  <v-col :cols="3" class="py-2 px-1">
+                    <v-select
+                      :label="$t('type')"
+                      filled
+                    />
+                  </v-col>
+                  <v-col :cols="3" class="py-2 px-1">
+                    <UiSelectDepartment />
+                  </v-col>
+                  <v-col :cols="3" class="py-2 px-1">
+                    <v-select
+                      :label="$t('federation')"
+                      filled
+                    />
+                  </v-col>
+                  <v-col :cols="3" class="py-2 px-1">
+                    <v-select
+                      :label="$t('distance')"
+                      :items="[
+                        {distance: 10, label: '10km'},
+                        {distance: 30, label: '30km'},
+                        {distance: 100, label: '100km'},
+                        {distance: 200, label: '200km'}
+                      ]"
+                      item-value="distance"
+                      item-text="label"
+                      filled
+                    />
+                  </v-col>
+                </v-row>
+              </v-col>
+              <v-col v-if="listview" cols="2" class="py-2 px-1 d-flex justify-end">
+                <v-btn class="h100">
+                  {{ $t('search') }}
                 </v-btn>
               </v-col>
             </v-row>
+
+            <v-row v-show="mapview" class="px-2 pt-2">
+              <v-btn>{{ $t('reinitialize') }}</v-btn>
+              <v-spacer />
+              <v-btn>{{ $t('search') }}</v-btn>
+            </v-row>
           </v-form>
         </v-row>
 
@@ -95,7 +101,7 @@
           :items-per-page="itemsPerPage"
           sort-by="name"
           hide-default-footer
-          style="margin-top: 15px;"
+          class="pt-4"
         >
           <!--          <span class="no-result" style="display: none">{{ $t("no_result") }}</span>-->
           <!--          <span class="error-message" style="display: none">{{ $t("an_error_occured") }}</span>-->
@@ -104,57 +110,68 @@
           <!--          </span>-->
 
           <template #default="props">
-            <v-row>
+            <v-row justify="space-between" class="my-3">
               <v-col
                 v-for="structure in props.items"
                 :key="structure.name"
                 cols="12"
                 sm="12"
-                md="6"
+                :md="mapview ? 6 : 12"
+                class="py-2 px-1"
               >
                 <v-card
                   elevation="1"
                   outlined
-                  class="structure-card"
+                  :class="'structure-card pa-3 d-flex ' + (mapview ? 'flex-column' : 'flex-row align-items-center')"
                 >
-                  <v-card-subtitle>
+                  <div class="d-flex justify-center">
                     <v-img
                       :src="structure.logoId ? ('https://api.opentalent.fr/app.php/_internal/secure/files/' + structure.logoId) : '/images/default.jpg'"
                       alt="poster"
                       height="80px"
-                      max-width="100%"
+                      min-width="160px"
+                      max-width="80%"
                       max-height="100%"
                       :contain="true"
                       style="margin: 12px;"
                     />
-                  </v-card-subtitle>
+                  </div>
 
-                  <v-card-subtitle class="structure-practices" />
+                  <div class="d-flex flex-column">
+                    <v-chip-group v-if="structure.practices" active-class="primary--text">
+                      <v-chip v-for="practice in structure.practices.split(',')" :key="practice" outlined small pill>
+                        {{ $t(practice) }}
+                      </v-chip>
+                    </v-chip-group>
 
-                  <v-card-title class="title">
-                    {{ structure.name }}
-                  </v-card-title>
+                    <v-card-title class="title">
+                      {{ structure.name }}
+                    </v-card-title>
 
-                  <v-card-text class="infos">
-                    <v-row>
-                      <v-col cols="2" style="text-align: center;">
-                        <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
-                      </v-col>
-                      <v-col cols="10">
-                        {{ [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ") }}
-                      </v-col>
-                    </v-row>
-                    <v-row>
-                      <v-col cols="2" style="justify-content: center;">
-                        <font-awesome-icon class="icon" :icon="['fas', 'project-diagram']" />
-                      </v-col>
-                      <v-col cols="10">
-                        {{ structure.n1Name }}
-                      </v-col>
-                    </v-row>
-                  </v-card-text>
+                    <v-card-text class="infos">
+                      <table>
+                        <tr>
+                          <td class="py-1 pr-2">
+                            <font-awesome-icon class="icon" :icon="['fas', 'map-marker-alt']" />
+                          </td>
+                          <td class="py-1">
+                            {{ [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ") }}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td class="py-1 pr-2">
+                            <font-awesome-icon class="icon" :icon="['fas', 'project-diagram']" />
+                          </td>
+                          <td class="py-1">
+                            {{ structure.n1Name }}
+                          </td>
+                        </tr>
+                      </table>
+                    </v-card-text>
+                  </div>
+                  <span class="flex-fill" />
 
-                  <v-card-actions>
+                  <v-card-actions :class="listview ? 'align-self-end' : ''">
                     <v-btn class="see" :to="'/structures_adherentes/' + structure.id">
                       <span style="margin-right: 6px;">{{ $t("see_more") }}</span>
                       <font-awesome-icon :icon="['fa', 'caret-right']" />
@@ -170,6 +187,7 @@
               v-model="page"
               :length="pageCount"
               total-visible="9"
+              color="#e4611b"
             />
           </template>
         </v-data-iterator>
@@ -1759,7 +1777,8 @@ export default {
           parents: '12097'
         }],
       page: 1,
-      itemsPerPage: 8
+      itemsPerPage: 8,
+      mapview: true
     }
   },
   computed: {
@@ -1768,36 +1787,43 @@ export default {
     },
     pageCount () {
       return Math.floor(this.totalRecords / this.itemsPerPage) + 1
+    },
+    listview () {
+      return !this.mapview
+    }
+  },
+  methods: {
+    viewChanged (e) {
+      this.mapview = (e === 0)
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-$theme: #e4611b;
+  @import 'assets/style/variables.scss';
 
-h2 {
-  color: $theme;
-}
-
-.structure-card {
-  //height: 360px;
-}
+  h2 {
+    color: $theme;
+  }
 
-.infos .col {
-  padding: 6px 12px;
-}
+  .structure-card {
+    height: 100%;
+  }
 
-.title {
-  word-break: normal;
-  color: $theme;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.6rem;
-}
+  .infos .col {
+    padding: 6px 12px;
+  }
 
-.icon {
-  color: $theme;
-}
+  .title {
+    word-break: normal;
+    color: $theme;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.6rem;
+  }
 
+  .icon {
+    color: $theme;
+  }
 </style>