source: OpenWorkouts-current/ow/static/less/pages/profile.less @ 04c882d

current
Last change on this file since 04c882d was 04c882d, checked in by Borja Lopez <borja@…>, 5 years ago

(#7) Improvements on the workout totals/stats in the user profile page:

  • Fixed styles for the sport/year dropdowns
  • Added "per workout records" for each year (and all time totals), including maximum distance, time and elevation in a single workout.
  • Property mode set to 100644
File size: 2.6 KB
RevLine 
[594fbe8]1.user-profile {
2    .workout-options {
3        .font-size(13);
[ffd6bb5]4                margin-right: 2em;
[594fbe8]5    }
6}
[67fc2ed]7
8.user-profile-account {
9        background-color: @color-main-xtralight;
[cf12619]10        border-bottom: 1px solid @color-main-light;
[67fc2ed]11    padding: 2em  1em;
12    @media (min-width: @screen-s){
13        padding: 2em 6em;
[6993c72]14    }
[ffd6bb5]15    >div {
[5cf7630]16            @media (min-width: @screen-m){
17                display: flex;
18                align-items: center;
19            }
[ffd6bb5]20    }
[6993c72]21    img {
[5cf7630]22        width: 64px;
23        height: 64px;
[6993c72]24        object-fit: cover;
25        border-radius: 50%;
26        margin-bottom: .5em;
[ffd6bb5]27        margin-right: 1em;
[5cf7630]28            @media (min-width: @screen-m){
29                width: 140px;
30                height: 140px;
31            }
[67fc2ed]32    }
33        h2 {
34                margin: 0 0 .15em 0;
35                .font-size(21);
[cf12619]36                font-weight: 400;
[67fc2ed]37        }
38        p{
39                color: @color-main-dark;
40                .font-size(14);
41                margin: 0;
[5cf7630]42                a {
43                        color: @color-app;
44                        text-decoration: none;
45                        &:hover {
46                                color: @color-main;
47                        }
48                }
[67fc2ed]49                span {
50                        color: @color-main-medium;
51                }
52        }
[6993c72]53}
54.total-workouts {
55        .font-size(13);
56        font-weight: bold;
[01674ff]57        span {
58                color: @color-main-medium;
59                margin-right: .5em;
60                &:first-child {
61                        color: @color-main;
62                        &:after {
63                                content: "|";
64                                color: @color-main-light;
65                                margin-left:  .5em;
66                        }
67                }
68        }
[67fc2ed]69}
70
71.profile-data {
72        list-style-type: none;
73        padding: 0;
74        .font-size(14);
[ffd6bb5]75        background-color: white;
76        padding: .5em .75em;
77        border-radius: 4px;
78        border: 1px solid @color-main-light;
[67fc2ed]79        li {
[ffd6bb5]80                display: flex;
81                justify-content: space-between;
82                color: @color-main-medium;
83                &:not(:last-child) {
84                        margin-bottom: .5em;
85                        padding-bottom: .5em;
86                        border-bottom: 1px solid @color-main-light;
87                }
88                span {
89                        font-weight: bold;
90                        color: @color-main;
91                }
[04c882d]92                a {
93                    color: @color-app;
94                    text-decoration: none;
95                    &:hover {
96                        color: @color-main;
97                    }
98                    &:active, &:focus {
99                        outline: 0;
100                        border: none;
101                        -moz-outline-style: none;
102                    }
103                }
[67fc2ed]104        }
105}
106
107.profile-bio {
[ffd6bb5]108        margin: .5em 0;
109        .font-size(14);
[67fc2ed]110}
111
112.month-stats,
113.latest-workouts {
[ffd6bb5]114        max-width: 700px
115}
116
[cf12619]117.center {
118        text-align: center;
119}
120
[ffd6bb5]121.month-stats {
122        margin-bottom: 4em;
[67fc2ed]123}
124
125.latest-workouts {
126        h4 {
127                margin:0;
128                a {
129                        color: @color-main;
130                        text-decoration: none;
131                }
132        }
133        >span {
134                .font-size(13);
135        }
136        p {
137                margin-top: .25em;
138                color: @color-main-medium;
139                .font-size(13);
140        }
[778d53d]141}
142
143.profile-dropdown-sports,
144.profile-dropdown-years {
145    color: @color-main;
146    text-decoration: none;
147    &:hover {
148        color: @color-main;
149    }
150    &:active, &:focus {
151        outline: 0;
152        border: none;
153        -moz-outline-style: none;
154    }
155}
Note: See TracBrowser for help on using the repository browser.