From a42dfdfd8fa7019894be3c29ff93e162d5ecdb23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20=C5=BDec?= <zecmarce@fel.cvut.cz>
Date: Fri, 8 May 2020 14:26:16 +0200
Subject: [PATCH] tripmedium better design, highligher class
---
FrontEnd/travel-and-work-app/src/App.css | 526 +++++++++---------
.../src/Components/Home/Trip/IndexFilter.js | 26 +-
.../src/Components/Home/Trip/TripMedium.js | 43 +-
3 files changed, 312 insertions(+), 283 deletions(-)
diff --git a/FrontEnd/travel-and-work-app/src/App.css b/FrontEnd/travel-and-work-app/src/App.css
index a6fff59e3..55b80b0f1 100644
--- a/FrontEnd/travel-and-work-app/src/App.css
+++ b/FrontEnd/travel-and-work-app/src/App.css
@@ -1,78 +1,80 @@
/*generacl components style*/
-body{
- background-color: #f7f7f7!important;
+body {
+ background-color: #f7f7f7 !important;
}
-.window{
+.window {
background: white;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .15);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.15);
padding: 8px 20px;
margin: 8px;
}
-.window.radius{
+.window.radius {
border-radius: 10px;
}
-.window.fullwidth{
+.window.fullwidth {
width: 100%;
}
-a.submit svg{
- color: #fff!important;
+a.submit svg {
+ color: #fff !important;
margin-left: 7px;
}
-a.submit{
+a.submit {
margin: auto;
background-color: #ff6666;
- border:0px solid white;
+ border: 0px solid white;
outline: none;
color: #fff;
- padding: .375rem .75rem;
+ padding: 0.375rem 0.75rem;
border-radius: 5px;
- transition: .3s all;
+ transition: 0.3s all;
font-weight: 400;
font-size: 16px;
}
-a.submit:hover{
+a.submit:hover {
background-color: #d85656;
text-decoration: none;
color: #fff;
}
-button.submit{
+button.submit {
margin: auto;
background-color: #ff6666;
- border:0px solid white;
+ border: 0px solid white;
outline: none;
}
-button.submit:hover{
+button.submit:hover {
background-color: #d85656;
}
-button.submit:active, button.submit:focus{
+button.submit:active,
+button.submit:focus {
outline: none;
- border: none!important;
- background-color: #d85656!important;
- box-shadow: none!important;
+ border: none !important;
+ background-color: #d85656 !important;
+ box-shadow: none !important;
}
-button.cancel{
+button.cancel {
background-color: #fff;
color: #ff6666;
border: 1px solid #ff6666;
}
-button.cancel:hover{
+button.cancel:hover {
background-color: #d85656;
color: #fff;
border: 1px solid #e75757;
}
-button.cancel:active, button.cancel:focus{
- outline: none!important;
+button.cancel:active,
+button.cancel:focus {
+ outline: none !important;
border: 1px solid #ff6666;
- background-color: #d85656!important;
- box-shadow: none!important;
+ background-color: #d85656 !important;
+ box-shadow: none !important;
}
-button.cancel:visited{
- outline: none!important;;
- border: none!important;
- background-color: #d85656!important;
+button.cancel:visited {
+ outline: none !important;
+ border: none !important;
+ background-color: #d85656 !important;
}
-.popup_background{
- background-color: rgb(0, 0, 0,.5);
+.popup_background {
+ background-color: rgb(0, 0, 0, 0.5);
position: fixed;
left: 0px;
top: 0px;
@@ -83,80 +85,80 @@ button.cancel:visited{
justify-content: center;
align-items: center;
}
-.popup_background.hidden{
+.popup_background.hidden {
display: none;
}
-.popup_background .pay_deposit{
+.popup_background .pay_deposit {
width: 550px;
}
-.popup_background .pay_deposit button{
+.popup_background .pay_deposit button {
margin: 5px 20px;
width: 80px;
}
-.alignLeft{
+.alignLeft {
text-align: left;
}
-.list-group-item .modalButton:hover{
+.list-group-item .modalButton:hover {
color: black;
}
-.list-group-item{
- border:none!important;
+.list-group-item {
+ border: none !important;
}
-.list-group-item:last-of-type{
- border-bottom: 1px solid rgba(0,0,0,.125)!important;
+.list-group-item:last-of-type {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}
-.list-group-item:first-of-type{
- border-bottom: none!important;
+.list-group-item:first-of-type {
+ border-bottom: none !important;
}
-.modal-content svg{
- color:#ff6666;
+.modal-content svg {
+ color: #ff6666;
margin-bottom: 15px;
}
-.checked{
- color:#25db9e!important;
+.checked {
+ color: #25db9e !important;
}
-.false{
- color:#ce3131!important;
+.false {
+ color: #ce3131 !important;
}
-.popup_background .achievements .card-body{
+.popup_background .achievements .card-body {
display: flex;
}
-#validationFalse{
+#validationFalse {
display: none;
- color:#ce3131!important;
+ color: #ce3131 !important;
font-weight: 500;
}
-.switch{
+.switch {
margin: 8px auto;
text-align: center;
background-color: #fff;
border-radius: 9px;
display: inline-block;
- box-shadow:0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .15);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.15);
}
-.switch span{
+.switch span {
padding: 10px;
display: inline-block;
width: 150px;
color: #6d6d6d;
cursor: pointer;
}
-.switch span:hover{
- color:rgb(61, 61, 61);
+.switch span:hover {
+ color: rgb(61, 61, 61);
}
-.switch span.active{
+.switch span.active {
background-color: #ff6666;
color: white;
border-radius: 9px;
- transition: .7s all;
+ transition: 0.7s all;
}
-.spinner-border{
- width:4em!important;
- border:0.25em solid #ff6666!important;
- border-left-color: transparent!important;
- border-right-color: transparent!important;
- width:3em!important;
- height:3em!important;
+.spinner-border {
+ width: 4em !important;
+ border: 0.25em solid #ff6666 !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ width: 3em !important;
+ height: 3em !important;
}
/*tooltip*/
.customTooltip {
@@ -170,11 +172,12 @@ button.cancel:visited{
max-width: 130px;
margin-top: 10px;
}
-.customTooltip svg.checked, .customTooltip svg.false{
+.customTooltip svg.checked,
+.customTooltip svg.false {
margin-left: 8px;
}
-.customTooltip svg{
- color:#ff6666;
+.customTooltip svg {
+ color: #ff6666;
font-size: 20px;
}
.customTooltip:hover .tooltiptext {
@@ -193,7 +196,7 @@ button.cancel:visited{
z-index: 1;
opacity: 0;
font-size: 13px;
- transition: opacity .6s;
+ transition: opacity 0.6s;
}
.tooltip-bottom {
top: 70%;
@@ -213,26 +216,25 @@ button.cancel:visited{
/*own scroll*/
.customScroll::-webkit-scrollbar {
width: 8px;
- }
-
- /* Track */
- .customScroll::-webkit-scrollbar-track {
+}
+
+/* Track */
+.customScroll::-webkit-scrollbar-track {
background: #fff;
- }
-
- /* Handle */
- .customScroll::-webkit-scrollbar-thumb {
+}
+
+/* Handle */
+.customScroll::-webkit-scrollbar-thumb {
background: #989898;
border-radius: 5px;
-
- }
-
- /* Handle on hover */
- .customScroll::-webkit-scrollbar-thumb:hover {
+}
+
+/* Handle on hover */
+.customScroll::-webkit-scrollbar-thumb:hover {
background: #555;
- }
+}
/*checkboxes style*/
- .containerInput{
+.containerInput {
display: block;
position: relative;
padding-left: 35px;
@@ -243,50 +245,50 @@ button.cancel:visited{
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- }
- /* Hide the browser's default checkbox */
- .containerInput input {
+}
+/* Hide the browser's default checkbox */
+.containerInput input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
- }
-
- /* Create a custom checkbox */
- .checkmark {
+}
+
+/* Create a custom checkbox */
+.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
- }
-
- /* On mouse-over, add a grey background color */
- .containerInput:hover input ~ .checkmark {
+}
+
+/* On mouse-over, add a grey background color */
+.containerInput:hover input ~ .checkmark {
background-color: #ccc;
- }
-
- /* When the checkbox is checked, add a blue background */
- .containerInput input:checked ~ .checkmark {
+}
+
+/* When the checkbox is checked, add a blue background */
+.containerInput input:checked ~ .checkmark {
background-color: #ff6666;
- }
-
- /* Create the checkmark/indicator (hidden when not checked) */
- .checkmark:after {
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
content: "";
position: absolute;
display: none;
- }
-
- /* Show the checkmark when checked */
- .containerInput input:checked ~ .checkmark:after {
+}
+
+/* Show the checkmark when checked */
+.containerInput input:checked ~ .checkmark:after {
display: block;
- }
-
- /* Style the checkmark/indicator */
- .containerInput .checkmark:after {
+}
+
+/* Style the checkmark/indicator */
+.containerInput .checkmark:after {
left: 9px;
top: 4px;
width: 7px;
@@ -294,33 +296,33 @@ button.cancel:visited{
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
- }
+}
/*header*/
-header{
+header {
position: fixed;
z-index: 9999;
width: 100%;
background-color: white;
box-shadow: 0px 1px 7px 1px #bfbfbf;
}
-header+div{
+header + div {
padding-top: 67px;
}
-header img.logo{
+header img.logo {
width: 60px;
}
header .navbar {
padding: 0px;
}
-header .navbar-brand a{
+header .navbar-brand a {
color: #ff6666;
}
-header .navbar-brand a:hover{
+header .navbar-brand a:hover {
text-decoration: none;
}
-header .nav-link a{
+header .nav-link a {
text-decoration: none;
- color: #303030!important;
+ color: #303030 !important;
}
/*SANDRY CSS**/
.App {
@@ -405,47 +407,49 @@ header .nav-link a{
color: cornflowerblue;
}
/*register page*/
-.registerUserForm h3, .registerUserForm h5{
+.registerUserForm h3,
+.registerUserForm h5 {
font-weight: 100;
color: #808080;
text-align: left;
margin-top: 10px;
}
-.register_container h3{
- color:#ff6666;
+.register_container h3 {
+ color: #ff6666;
margin-top: 30px;
}
-.registerUserForm .window{
+.registerUserForm .window {
margin-left: auto;
}
-.registerUserForm button{
+.registerUserForm button {
margin: auto;
background-color: #ff6666;
margin-bottom: 10px;
}
-.registerUserForm label,.login_container label{
+.registerUserForm label,
+.login_container label {
text-align: left;
display: block;
}
/*login_container*/
-.login_form{
+.login_form {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 500px;
z-index: 100;
}
-.login_form .submit{
+.login_form .submit {
width: 140px;
}
-.login_form label.checkbox{
+.login_form label.checkbox {
text-align: center;
display: inline-block;
}
-.login_form .form-check{
- display: inline-block!important;
+.login_form .form-check {
+ display: inline-block !important;
}
-.login_background{
+.login_background {
position: absolute;
left: 0px;
overflow: hidden;
@@ -456,51 +460,55 @@ header .nav-link a{
z-index: 0;
}
/*index*/
-.trips{
- margin-top:80px;
+.trips {
+ margin-top: 80px;
}
-.trip_info{
+.trip_info {
position: absolute;
height: 100%;
top: 0;
width: 100%;
}
-.trip_info h4{
+.trip_info h4 {
position: absolute;
- bottom:0px;
+ bottom: 0px;
width: 100%;
z-index: 99;
- margin-left: 0!important;
+ margin-left: 0 !important;
padding: 8px;
padding-top: 45px;
- font-size:14pt;
- background: rgb(0,0,0);
- background: linear-gradient(0deg, rgba(0,0,00,.75) 50%, rgba(80,80,80,0.4797269249496674) 87%, rgba(255,255,255,0) 100%);
-}
-.card-columns{
+ font-size: 14pt;
+ background: rgb(0, 0, 0);
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 00, 0.75) 50%,
+ rgba(80, 80, 80, 0.4797269249496674) 87%,
+ rgba(255, 255, 255, 0) 100%
+ );
+}
+.card-columns {
display: flex;
flex-flow: wrap;
align-items: top;
align-content: center;
justify-content: center;
}
-.card-columns .card{
- margin-bottom: 0px!important;
- border:none!important;
+.card-columns .card {
+ margin-bottom: 0px !important;
+ border: none !important;
}
-.card-columns a{
+.card-columns a {
width: 250px;
margin: 10px;
- border-top-left-radius: calc(.25rem - 1px);
- border-top-right-radius: calc(.25rem - 1px);
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .15);
-
+ border-top-left-radius: calc(0.25rem - 1px);
+ border-top-right-radius: calc(0.25rem - 1px);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.15);
}
-.card .row{
+.card .row {
padding: 7px;
- margin: 0px!important
+ margin: 0px !important;
}
-.card .price span{
+.card .price span {
position: absolute;
bottom: 0;
width: 100%;
@@ -508,149 +516,149 @@ header .nav-link a{
right: 7px;
top: 1px;
}
-.card .date_stars{
- color:#363636;
+.card .date_stars {
+ color: #363636;
padding: 0px;
- font-size:11pt;
+ font-size: 11pt;
}
-.card .trip_sessions{
- color:#363636;
+.card .trip_sessions {
+ color: #363636;
font-size: 10pt;
font-weight: 400;
padding-bottom: 0px;
}
-.card .trip_sessions .col{
+.card .trip_sessions .col {
text-align: left;
margin-left: -5px;
}
-.card .dateIcon{
+.card .dateIcon {
margin-right: 5px;
color: #ff6666;
}
/*trip detail*/
-#trip_detail{
+#trip_detail {
margin-top: 50px;
}
-#trip_detail .trip_main .image{
+#trip_detail .trip_main .image {
width: 100%;
padding: 0px;
}
-#trip_detail .trip_main .image img{
+#trip_detail .trip_main .image img {
width: 100%;
}
-.trip_main .trip_info{
+.trip_main .trip_info {
text-align: left;
}
-.trip_info .card-title{
+.trip_info .card-title {
font-size: 14px;
}
-.trip_info .card-title svg{
- color: #ff6666!important;
+.trip_info .card-title svg {
+ color: #ff6666 !important;
}
-.trip_info .card-title.trip_name{
+.trip_info .card-title.trip_name {
font-size: 20px;
}
-.trip_info .card-text{
+.trip_info .card-text {
margin-left: 15px;
}
-.trip_info .trip_price{
+.trip_info .trip_price {
color: #ff6666;
font-size: 25px;
font-weight: 500;
}
-.trip_info .rev-price-buy{
+.trip_info .rev-price-buy {
position: absolute;
bottom: 0px;
right: 0px;
text-align: right;
}
-.trip_info button.submit{
+.trip_info button.submit {
width: 130px;
padding: 10px 15px;
}
-.trip_info .review_element{
+.trip_info .review_element {
color: #fce23a;
}
/*tripDetail reviews*/
-.trip_reviews .review{
+.trip_reviews .review {
text-align: left;
margin-top: 20px;
}
-.trip_reviews .rev_author svg{
- color:#ff6666;
+.trip_reviews .rev_author svg {
+ color: #ff6666;
}
-.trip_reviews .rev_author span{
+.trip_reviews .rev_author span {
margin-left: 10px;
}
-.trip_reviews .rev_rating{
+.trip_reviews .rev_rating {
text-align: right;
- color:#fce23a;
+ color: #fce23a;
}
-.trip_reviews p.note{
+.trip_reviews p.note {
margin: 0px 20px;
- color:#363636
+ color: #363636;
}
/*trip detail deposit and minimum level*/
-#trip_detail .trip_restriction svg{
- color:#ff6666;
+#trip_detail .trip_restriction svg {
+ color: #ff6666;
margin-right: 5px;
}
-#trip_detail .trip_restriction p.card-text{
+#trip_detail .trip_restriction p.card-text {
font-weight: 500;
font-size: 20px;
}
-#trip_detail .trip_restriction .subtitle{
+#trip_detail .trip_restriction .subtitle {
text-align: left;
margin-top: 15px;
margin-left: 15px;
}
/*trip validation user*/
-.trip_validation{
+.trip_validation {
max-width: 600px;
max-height: 87%;
overflow-y: auto;
width: 550px;
padding: 15px 25px;
}
-.trip_validation .card-title{
+.trip_validation .card-title {
font-size: 16px;
margin-bottom: 3px;
}
-.trip_validation .card-body{
+.trip_validation .card-body {
padding-top: 0px;
}
-.trip_validation .row{
+.trip_validation .row {
margin-bottom: 5px;
}
-.trip_validation .row:first-of-type{
+.trip_validation .row:first-of-type {
margin-top: 15px;
}
-.trip_validation .close{
+.trip_validation .close {
position: relative;
cursor: pointer;
}
-.trip_validation .validate_error{
+.trip_validation .validate_error {
color: #ce3131;
display: none;
}
-.trip_validation input:not(:checked) ~ .validate_error{
+.trip_validation input:not(:checked) ~ .validate_error {
display: block;
}
/*userProfile*/
-#userProfileMain{
+#userProfileMain {
margin-bottom: 30px;
}
-#userProfileMain .userPhoto{
+#userProfileMain .userPhoto {
width: 250px;
- padding: 15px!important;
+ padding: 15px !important;
margin: auto;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .15);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.15);
}
-#userProfileMain .userPhoto img{
+#userProfileMain .userPhoto img {
width: 100%;
border-radius: 8px;
}
-#userProfileMain .userLevel{
+#userProfileMain .userLevel {
color: white;
/*border-bottom: 35px solid #ff6666;
border-left: 25px solid transparent;
@@ -663,73 +671,76 @@ header .nav-link a{
margin: auto;
padding: 3px;
}
-#userProfileMain .userLevel::after{
+#userProfileMain .userLevel::after {
width: 0;
height: 0;
border-bottom: 17px solid #d14f4f;
border-right: 17px solid transparent;
- content: '';
+ content: "";
position: absolute;
right: 0;
top: -17px;
}
-#userProfileMain .userLevel::before{
+#userProfileMain .userLevel::before {
width: 0;
height: 0;
border-bottom: 17px solid #d14f4f;
border-left: 17px solid transparent;
- content: '';
+ content: "";
position: absolute;
left: 0;
top: -17px;
}
-#userProfileMain .progress-bar{
+#userProfileMain .progress-bar {
background-color: #ff6666;
}
-#userProfileMain .progress{
+#userProfileMain .progress {
height: 2em;
font-size: 14px;
border-radius: 10px;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .15);
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.15);
}
-#userProfileMain .user_info, #userProfileMain .user_adress{
+#userProfileMain .user_info,
+#userProfileMain .user_adress {
text-align: left;
}
-#userProfileMain .user_info h5, #userProfileMain .user_adress h5{
+#userProfileMain .user_info h5,
+#userProfileMain .user_adress h5 {
margin-top: 2px;
margin-bottom: 15px;
margin-left: 5px;
}
-#userProfileMain .user_info label,#userProfileMain .user_adress label{
+#userProfileMain .user_info label,
+#userProfileMain .user_adress label {
margin-bottom: 0px;
margin-top: 10px;
}
-#userProfileMain .window .row{
+#userProfileMain .window .row {
padding: 10px 15px;
}
-#userProfileMain .user_adress p{
+#userProfileMain .user_adress p {
font-weight: 500;
margin-bottom: 0px;
margin-left: 5px;
}
-#userProfileMain .userMenu{
+#userProfileMain .userMenu {
margin-top: 35px;
margin-bottom: 25px;
}
-#userProfileMain .userMenu svg{
+#userProfileMain .userMenu svg {
color: #ff6666;
}
-#userProfileMain .userMenu a{
+#userProfileMain .userMenu a {
color: #525252;
- transition: .3s all;
+ transition: 0.3s all;
cursor: pointer;
text-decoration: none;
}
-#userProfileMain .userMenu a:focus:after {
- width: 100%;
- left: 0;
- }
-#userProfileMain .userMenu a:after {
+#userProfileMain .userMenu a:focus:after {
+ width: 100%;
+ left: 0;
+}
+#userProfileMain .userMenu a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
@@ -740,102 +751,103 @@ header .nav-link a{
background: #ff6666;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
- }
-#userProfileMain .userMenu a:hover:after {
- width: 100%;
- left: 0;
+}
+#userProfileMain .userMenu a:hover:after {
+ width: 100%;
+ left: 0;
}
/*userTrip*/
-#tripsElementBlock{
+#tripsElementBlock {
margin: 35px 0px;
}
-.userTrip.window{
+.userTrip.window {
padding: 0px;
-
}
-.userTrip .tripImage{
+.userTrip .tripImage {
width: 125px;
height: 125px;
border-radius: 8px;
margin: auto;
overflow: hidden;
}
-.userTrip .tripImage img{
+.userTrip .tripImage img {
margin-left: -25%;
height: 100%;
}
-.userTrip .card-title.h5{
+.userTrip .card-title.h5 {
text-align: left;
font-size: 16px;
}
-.userTrip .card-text{
+.userTrip .card-text {
font-size: 17px;
font-weight: 500;
text-align: left;
margin-left: 7px;
}
-#tripsElementBlock .activeTrips, #tripsElementBlock .archiveTrips{
+#tripsElementBlock .activeTrips,
+#tripsElementBlock .archiveTrips {
display: none;
}
-#tripsElementBlock .activeTrips.active, #tripsElementBlock .archiveTrips.active{
+#tripsElementBlock .activeTrips.active,
+#tripsElementBlock .archiveTrips.active {
display: block;
}
-.archiveTrips .card-text svg{
+.archiveTrips .card-text svg {
color: #ff6666;
}
-.archiveTrips .card-text svg:hover{
+.archiveTrips .card-text svg:hover {
color: #ff6666;
}
-.archiveTrips .reviewTrip svg{
+.archiveTrips .reviewTrip svg {
color: #ff6666;
}
/*userProfile Achievements*/
-.userAchievements .achievements{
+.userAchievements .achievements {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-wrap: wrap;
}
-.userAchievements .achievements .achievement{
+.userAchievements .achievements .achievement {
flex: 1 0 21%;
margin: 15px;
text-align: center;
}
-.userAchievements .achievements .achievement svg{
+.userAchievements .achievements .achievement svg {
color: #ff6666;
- font-size: 4.0em;
+ font-size: 4em;
margin: auto;
margin-top: 25px;
}
-.userAchievements .achievements .achievement span{
+.userAchievements .achievements .achievement span {
display: block;
text-align: center;
}
-.userAchievements h6{
- text-align:center;
+.userAchievements h6 {
+ text-align: center;
width: 100%;
font-size: 17px;
color: #333333;
}
-.userAchievements h5{
- text-align:center;
+.userAchievements h5 {
+ text-align: center;
width: 100%;
font-size: 20px;
color: #333333;
margin-top: 10px;
}
-.userAchievements .circle{
+.userAchievements .circle {
border: 3px solid #d14f4f;
border-radius: 100%;
width: 130px;
height: 130px;
margin: auto;
}
-.userAchievements .achievements{
+.userAchievements .achievements {
margin-bottom: 20px;
}
-.userAchievements .achievements span{
+.userAchievements .achievements span {
color: white;
/*border-bottom: 35px solid #ff6666;
border-left: 25px solid transparent;
@@ -848,23 +860,29 @@ header .nav-link a{
margin: auto;
padding: 3px;
}
-.userAchievements .achievements span::after{
+.userAchievements .achievements span::after {
width: 0;
height: 0;
border-top: 17px solid #d14f4f;
border-right: 17px solid transparent;
- content: '';
+ content: "";
position: absolute;
right: 0;
bottom: -17px;
}
-.userAchievements .achievements span::before{
+.userAchievements .achievements span::before {
width: 0;
height: 0;
border-top: 17px solid #d14f4f;
border-left: 17px solid transparent;
- content: '';
+ content: "";
position: absolute;
left: 0;
bottom: -17px;
-}
\ No newline at end of file
+}
+
+.textHighlight {
+ color: black;
+ background-color: yellow;
+ padding: 0%;
+}
diff --git a/FrontEnd/travel-and-work-app/src/Components/Home/Trip/IndexFilter.js b/FrontEnd/travel-and-work-app/src/Components/Home/Trip/IndexFilter.js
index 5bb07b856..63b50dd50 100644
--- a/FrontEnd/travel-and-work-app/src/Components/Home/Trip/IndexFilter.js
+++ b/FrontEnd/travel-and-work-app/src/Components/Home/Trip/IndexFilter.js
@@ -1,5 +1,5 @@
import React from "react";
-import { Container, Card, Form, Row } from "react-bootstrap";
+import { Container, Card, Form, Row, Col } from "react-bootstrap";
import TripSmall from "./TripSmall";
import CardColumns from "react-bootstrap/CardColumns";
import Spinner from "react-bootstrap/Spinner";
@@ -96,8 +96,8 @@ class IndexFilter extends React.Component {
);
} else {
return (
- <Container className="d-flex justify-content-center">
- <Row>
+ <Container className="d-flex mt-3">
+ <Col>
<Card>
<Form>
<Form.Group>
@@ -150,21 +150,23 @@ class IndexFilter extends React.Component {
</Form.Group>
</Form>
</Card>
- </Row>
+ </Col>
- <Row className="ml-3">
- <CardColumns className="d-flex flex-column">
- {this.state.trips.map((trip) => {
- return (
+ <Col className="ml-3">
+ {/*<CardColumns className="d-flex flex-column">*/}
+ {this.state.trips.map((trip) => {
+ return (
+ <Row>
<TripMedium
key={trip.short_name}
highlightWords={this.state.filter.words}
trip={trip}
/>
- );
- })}
- </CardColumns>
- </Row>
+ </Row>
+ );
+ })}
+ {/*</CardColumns>*/}
+ </Col>
{/*<CardColumns>
{this.state.trips.map((trip) => {
diff --git a/FrontEnd/travel-and-work-app/src/Components/Home/Trip/TripMedium.js b/FrontEnd/travel-and-work-app/src/Components/Home/Trip/TripMedium.js
index d5f4f17dd..0e5ea8dbf 100644
--- a/FrontEnd/travel-and-work-app/src/Components/Home/Trip/TripMedium.js
+++ b/FrontEnd/travel-and-work-app/src/Components/Home/Trip/TripMedium.js
@@ -56,7 +56,7 @@ class TripMedium extends React.Component {
return (
<Link to={"/trips/" + this.props.trip.short_name}>
- <Card>
+ <Card className="mb-3">
<Card.Body className="d-flex">
<div>
<div className="image-card">
@@ -71,12 +71,33 @@ class TripMedium extends React.Component {
this.props.trip.possible_xp_reward
} xp{" "}
</span>
- <h4 className="ml-3" id="trip-title">
- {" "}
- {this.props.trip.name}
- </h4>
</div>
</div>
+ </div>
+ <div>
+ <h4 className="ml-3">
+ <Highlighter
+ highlightClassName="textHighlight"
+ searchWords={
+ this.props.highlightWords
+ ? this.props.highlightWords
+ : []
+ }
+ autoEscape={true}
+ textToHighlight={this.props.trip.name}
+ />
+ </h4>
+
+ <Highlighter
+ highlightClassName="textHighlight"
+ searchWords={
+ this.props.highlightWords
+ ? this.props.highlightWords
+ : []
+ }
+ autoEscape={true}
+ textToHighlight={this.props.trip.description}
+ />
<Row className="trip_sessions">
<Col className="">
<span className="dateIcon">
@@ -94,18 +115,6 @@ class TripMedium extends React.Component {
</Col>
</Row>
</div>
- <div>
- <Highlighter
- highlightClassName="YourHighlightClass"
- searchWords={
- this.props.highlightWords
- ? this.props.highlightWords
- : []
- }
- autoEscape={true}
- textToHighlight={this.props.trip.description}
- />
- </div>
</Card.Body>
</Card>
</Link>
--
GitLab