Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unified diary screen #870

Closed
wants to merge 7 commits into from
Closed

Unified diary screen #870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
643bd2e
New InfiniteScrollTripItem Directive, Issue #740
tyleryandt18 Jul 7, 2022
1abf352
Diary Item Directive
tyleryandt18 Jul 8, 2022
f4ac44a
Unified Diary Screen
tyleryandt18 Aug 5, 2022
2d62b7a
Added Date Selector Functions and Templates
tyleryandt18 Aug 6, 2022
67817be
Requested Changes
tyleryandt18 Aug 10, 2022
6a9f4cc
Changing Color Schematic
tyleryandt18 Aug 10, 2022
0925801
Added Comments
tyleryandt18 Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 223 additions & 10 deletions www/css/main.diary.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,11 @@ a.item-content {
border-color: white;
}
.leaflet-div-icon-start {
background-color: #33e0bb;
background-color: #80D0FF;
border-radius: 6px;
}
.leaflet-div-icon-stop {
background-color: #ff5251;
background-color: #0088ce;
shankari marked this conversation as resolved.
Show resolved Hide resolved
border-radius: 6px;
}
.inner-icon {
Expand All @@ -113,20 +113,26 @@ a.item-content {
.btn-input-confirm-red,
.btn-input-confirm-red:hover,
.btn-input-confirm-red:active {
background-color: #ED2D3A;
color: white;
background-color: white;
color: #0088ce;
border-color: #0088ce;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.btn-input-confirm-yellow,
.btn-input-confirm-yellow:hover,
.btn-input-confirm-yellow:active {
background-color: #FFC108;
background-color: rgba(255, 165, 0, 0.8); /* tentatively orange for now */
shankari marked this conversation as resolved.
Show resolved Hide resolved
color: white;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border: 2px solid rgba(0, 136, 206, 0.2);
}
.btn-input-confirm-green,
.btn-input-confirm-green:hover,
.btn-input-confirm-green:active {
background-color: #30A64A;
background-color: #0088ce;
color: white;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border: 2px solid rgba(0, 136, 206, 0.2);
}
/* White confirm buttons are currently unused */
/* .btn-input-confirm-white,
Expand All @@ -136,12 +142,24 @@ a.item-content {
color: #333;
font-size: 0.8em;
} */


.btn-input-confirm {
line-height: 30px;
width: 100%;
height: 30px;
margin: 2px;
box-sizing: border-box;
border-radius: 10px;
font-family: 'Lato';
shankari marked this conversation as resolved.
Show resolved Hide resolved
font-style: normal;
font-weight: normal;
font-size: 12px;
shankari marked this conversation as resolved.
Show resolved Hide resolved

/* line-height: 30px;
min-height: 30px;
font-size: 0.8em !important;
width: 115px;
padding: 0;
padding: 0; */
}
.input-confirm-container {
margin-top: 5px;
Expand All @@ -162,20 +180,215 @@ a.item-content {
border-width: 0;
}

.unified-diary-item {
padding: 0;
margin: 0 1rem 0 1rem;
border-width: 0;
background-color: transparent;
/* height: 250px; */
}

.diary-card {
width: 100%;
height: 330px;
margin: 0;
border: 2px solid rgba(0, 136, 206, 0.2);
box-sizing: border-box;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.diary-button {
width: 100%;
height: 30px;
margin: 2px;
border: 2px solid #0088ce;
box-sizing: border-box;
border-radius: 50px;
background-color: #ffffff;
font-family: 'Lato';
font-style: normal;
font-weight: normal;
font-size: 13px;
}

.hr-lines {
position: relative;
justify-content: center;
font-family: 'Lato';
font-weight: bold;
display: flex;
color: #212121;
font-size: 19px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-top: 5px;
margin: 10px auto;
text-align: center;
}

@media screen and (orientation: portrait) {
.hr-lines:before {
content: " ";
display: block;
height: 2px;
width: 30%;
position: absolute;
top: 50%;
left: 0;
background: #80D0FF;
}

.hr-lines:after {
content: " ";
display: block;
height: 2px;
width: 30%;
position: absolute;
top: 50%;
right: 0;
background: #80D0FF;
}
}
@media screen and (orientation: landscape) {
.hr-lines:before {
content: " ";
display: block;
height: 2px;
width: 41%;
position: absolute;
top: 50%;
left: 0;
background: #80D0FF;
}

.hr-lines:after {
content: " ";
display: block;
height: 2px;
width: 41%;
position: absolute;
top: 50%;
right: 0;
background: #80D0FF;
}
}

.diary-draft-button {
font-family: 'Lato';
font-style: normal;
font-weight: normal;
font-style: 13px;
background-color: #ffffff;
border: none;
background-image: url("../img/icons/help_outline_black_24dp.svg");
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;
}

.diary-route {
margin: 5px 0;
}

.diary-street {
font-family: 'Lato';
font-style: normal;
font-weight: normal;
font-size: 13px;
white-space: normal;
}

.diary-map {
float: left;
width: 50%;
z-index: -1; /* Can't zoom in or out of the map with this implemented */
overflow: hidden;
border-radius: 30px 0px 0px 50px;
/* height must be specified in the html */
}

.diary-infos {
float: right;
width: 50%;
padding: 10% 2%;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.diary-distance-time {
font-family: 'Lato';
font-style: normal;
font-weight: bold;
font-size: 16px;
white-space: normal;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.diary-modes-percents {
margin: 5px 0;
}

.diary-modes-percents-text {
color: #0088ce;
}

.diary-modes-percents-icon {
color: #0088ce;
}

shankari marked this conversation as resolved.
Show resolved Hide resolved
/* Date Picker Override */
.ionic_datepicker_popup .today {
border: 1px solid #0088ce !important;
}

.ionic_datepicker_popup .selected_date {
background-color: #0088ce !important;
}

.ionic_datepicker_popup .popup-head {
background-color: #0088ce !important;
}

.ionic_datepicker_popup .popup-body .selected_date_full {
background-color: #0088ce !important;
}

.ionic_datepicker_popup .popup-body .month_select, .ionic_datepicker_popup .popup-body .year_select {
border-bottom: 1px solid #0088ce !important;
}

.ionic_datepicker_popup .popup-body .month_select:after, .ionic_datepicker_popup .popup-body .year_select:after {
color: #0088ce !important;
}

.ionic_datepicker_popup .popup-body .button-clear {
color: #0088ce !important;
}

.ionic_datepicker_popup .popup-buttons button {
background-color: #0088ce !important;
}
div.labelfilterlist {
margin: 0 !important;
}

.button.labelfilter {
color: #01D0A7;
color: #0088ce;
border-radius: 0px;
border-width: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 2px 2px rgba(0,0,0,0.23);
padding: 0 0.1em !important;
}

.button.labelfilter.on {
background-color: #01D0A7;
background-color: #0088ce;
color: white;
}

Expand Down
Loading