Changeset 01674ff in OpenWorkouts-current for ow/static

Timestamp:

Feb 6, 2019, 7:11:48 PM (5 years ago)

Author:

Segundo Fdez <segun.2@…>

Branches:

current, feature/docs, master

Children:

0bf3bd6, b05824e

Parents:

978575d

Message:

Update forms and fix detail workout view

Location:

ow/static

Files:

• css/main.css (modified) (7 diffs)
• less/layout/layout.less (added)
• less/layout/wrapper.less (added)
• less/main.less (modified) (2 diffs)
• less/modules/forms.less (added)
• less/modules/workout.less (modified) (1 diff)
• less/pages/profile.less (modified) (1 diff)
• less/ui/buttons.less (modified) (1 diff)
• less/ui/form.less (modified) (2 diffs)
• less/vendors/leaflet-elevation.less (modified) (2 diffs)

ow/static/css/main.css

@@ -429 +429 @@
   box-sizing: inherit;
 }
+/* ==========================================================================
+   Wrappers
+   ========================================================================== */
+/**
+ * Common wrappers to use in Scms-site.
+ * To reducing css size you can use extends instead of mixins
+ * to move the selector up to the properties you wish to use.
+ *
+ * Example LESS:
+ * .myclass {
+ *              &:extend(.wrapper);
+ * }
+ */
+.wrapper,
+.wrapper-s,
+.wrapper-l,
+.wrapper-xl,
+.ow-forms {
+  display: block;
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin: 0 auto;
+}
+@media (min-width: 480px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+@media (min-width: 800px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media (min-width: 1024px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+@media (min-width: 1440px) {
+  .wrapper,
+  .wrapper-s,
+  .wrapper-l,
+  .wrapper-xl,
+  .ow-forms {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+@media (min-width: 320px) {
+  .wrapper-s,
+  .ow-forms {
+    max-width: 740px;
+  }
+}
+@media (min-width: 320px) {
+  .wrapper-l {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 320px) {
+  .wrapper-xl {
+    max-width: 1440px;
+  }
+}
+/* Layout */
+.ly-flex {
+  display: flex;
+  justify-content: space-between;
+}
+.ly-flex.ly-center {
+  align-items: center;
+}
+.ly-flex.ly-start {
+  justify-content: flex-start;
+}
+.ly-flex.ly-2 {
+  flex-flow: row wrap;
+}
+.ly-flex.ly-2 > div,
+.ly-flex.ly-2 > li,
+.ly-flex.ly-2 > p,
+.ly-flex.ly-2 > a {
+  width: 50%;
+}
+.ly-flex.ly-2.has-gap > div,
+.ly-flex.ly-2.has-gap > li,
+.ly-flex.ly-2.has-gap > p,
+.ly-flex.ly-2.has-gap > a {
+  width: 48%;
+}
+.ly-flex.ly-3 {
+  flex-flow: row wrap;
+}
+.ly-flex.ly-3 > div,
+.ly-flex.ly-3 > li,
+.ly-flex.ly-3 > p {
+  width: 33%;
+}
+.ly-flex.ly-3.has-gap > div,
+.ly-flex.ly-3.has-gap > li,
+.ly-flex.ly-3.has-gap > p {
+  width: 31%;
+}
+.ly-flex.ly-4 {
+  flex-flow: row wrap;
+}
+.ly-flex.ly-4 > div,
+.ly-flex.ly-4 > li,
+.ly-flex.ly-4 > p {
+  width: 25%;
+}
+.ly-flex.ly-4.has-gap > div,
+.ly-flex.ly-4.has-gap > li,
+.ly-flex.ly-4.has-gap > p {
+  width: 23%;
+}
+.ly-flex-end {
+  align-items: flex-end;
+}
 /* Generic default forms */
 form {
@@ -440 +575 @@
   padding: 0;
 }
-fieldset > div {
+fieldset > div,
+fieldset > p {
   margin-bottom: 1.5em;
 }
@@ -453 +589 @@
   border: 1px solid transparent;
   border-radius: 2px;
+}
+.ow-forms label {
+  display: block;
+  margin-bottom: 0.35em;
+  color: #959595;
+}
+.ow-forms textarea {
+  resize: vertical;
+  height: 200px;
+}
+.ow-forms textarea,
+.ow-forms input {
+  width: 100%;
+  padding: 0.65em;
+  border-radius: 4px;
+  border: 1px solid #e1e1e1;
 }
 /* Generic button */
@@ -475 +627 @@
   line-height: 1.25;
   max-width: 100%;
+  width: auto;
+}
+.button-normal {
+  width: auto;
+}
+.button-normal:hover {
+  background-color: #959595;
+  color: white;
+}
+.button-important {
+  background-color: #EE4056;
 }
 .header-content {
@@ -792 +955 @@
 /* Workout detail */
 #map {
+  width: 100%;
   height: 400px;
 }
 @media (min-width: 480px) {
   #map {
-    height: calc(100vh - 380px);
+    height: calc(100vh - 465px);
   }
 }
@@ -1006 +1170 @@
   background-color: #e1e1e1;
 }
+.ow-forms {
+  padding-top: 2em;
+}
+.ow-forms h2 {
+  border-top: 1px solid #e1e1e1;
+  padding-top: 0.5em;
+}
+.back {
+  color: #EE4056;
+  text-decoration: none;
+  font-weight: 700;
+}
+.back:before {
+  content: "⬅";
+  margin-right: 0.5em;
+}
+.back:hover {
+  color: #151515;
+}
 .login-content {
   background-image: url("../media/img/back-01.jpg");
@@ -1115 +1298 @@
   font-weight: bold;
 }
+.total-workouts span {
+  color: #959595;
+  margin-right: 0.5em;
+}
+.total-workouts span:first-child {
+  color: #151515;
+}
+.total-workouts span:first-child:after {
+  content: "|";
+  color: #e1e1e1;
+  margin-left: 0.5em;
+}
 .profile-data {
   list-style-type: none;

ow/static/less/main.less

@@ -16 +16 @@
 @import "common.less";
 
+// layout
+@import "layout/wrapper.less";
+@import "layout/layout.less";
+
 // ui
 @import "ui/form.less";
@@ -23 +27 @@
 @import "modules/header.less";
 @import "modules/workout.less";
+@import "modules/forms.less";
 
 // Pages

ow/static/less/modules/workout.less

@@ -191 +191 @@
 /* Workout detail */
 #map {
+    width: 100%;
     height: 400px;
     @media (min-width: @screen-s){
-        height: calc(100vh - 380px);
+        height: calc(100vh - 465px);
     }
 }

ow/static/less/pages/profile.less

@@ -42 +42 @@
         .font-size(13);
         font-weight: bold;
+        span {
+                color: @color-main-medium;
+                margin-right: .5em;
+                &:first-child {
+                        color: @color-main;
+                        &:after {
+                                content: "|";
+                                color: @color-main-light;
+                                margin-left:  .5em;
+                        }
+                }
+        }
 }
 

ow/static/less/ui/buttons.less

@@ -20 +20 @@
     line-height: 1.25;
     max-width: 100%;
+    width: auto;
 }
+
+.button-normal {
+    width: auto;
+    &:hover {
+        background-color: @color-main-medium;
+        color: white;
+    }
+}
+.button-important {
+    background-color: @color-app;
+}

ow/static/less/ui/form.less

@@ -12 +12 @@
     padding: 0;
 }
-fieldset > div {
+
+fieldset > div,
+fieldset > p {
     margin-bottom: 1.5em;
 }
@@ -27 +29 @@
     border-radius: 2px;
 }
+
+.ow-forms {
+    label {
+        display: block;
+        margin-bottom: .35em;
+        color: @color-main-medium;
+    }
+    textarea {
+        resize: vertical;
+        height: 200px;
+    }
+    textarea,
+    input {
+        width: 100%;
+        padding: .65em;
+        border-radius: 4px;
+        border: 1px solid @color-main-light;
+    }
+}

ow/static/less/vendors/leaflet-elevation.less

@@ -72 +72 @@
 
 /* txt on map */
-
 .openworkouts-theme.height-focus-label {
     display: none;
@@ -82 +81 @@
     stroke: @color-app;
     stroke-width: 10px;
-
 }