Browse Source

update base.css about course - refs #2681

Alex Aragón 6 years ago
parent
commit
bb17c0a8d1
3 changed files with 122 additions and 337 deletions
  1. 0 302
      assets/css/base.css
  2. 104 14
      assets/css/scss/_base.scss
  3. 18 21
      main/template/default/course_home/about.html.twig

+ 0 - 302
assets/css/base.css

@@ -3656,308 +3656,6 @@ div#chat-remote-video video {
     min-height: 284px;
 }
 
-#about-course .panel-information ul {
-    margin: 20px 0;
-}
-
-#about-course .course, #about-course .session {
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-#about-course .session-requirements h5 {
-    font-weight: bold;
-}
-
-#about-course .session-title {
-    font-weight: bold;
-}
-
-#about-course .session-tutor {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    font-size: 12px;
-}
-
-#about-course .share-social-media {
-    padding: 10px 0 0 0;
-}
-
-#about-course .share-social-media .sharing-buttons li {
-    padding-left: 0;
-}
-
-#about-course .session-info .date {
-    font-weight: bold;
-    text-align: center;
-}
-
-#about-course .panel-tags {
-    display: inline-block;
-    width: 100%;
-    padding: 0 10px;
-    margin-top: 10px;
-}
-
-#about-course .panel-tags .course-tags {
-    margin-bottom: 0;
-}
-
-#about-course .panel-tags .course-tags li {
-    margin-bottom: 0;
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-
-#about-course .sub-title {
-    font-size: 22px;
-    font-weight: 700;
-    margin: 0 0 20px;
-}
-
-#about-course .topics .title-info {
-    margin: 30px 0 20px 0;
-    border-bottom: 1px solid #ddd;
-    padding-bottom: 15px;
-}
-
-#about-course .coach-header {
-    display: flex;
-    -moz-box-align: center;
-    -webkit-box-align: center;
-    align-items: center;
-    flex-flow: row;
-}
-
-#about-course .coach-header .coach-avatar {
-    width: 70px;
-    margin-right: 20px;
-}
-
-#about-course .coach-header .coach-avatar .img-circle {
-    border: 1px solid #C0C0C0;
-}
-
-#about-course .coach-header .coach-title {
-    flex-flow: column;
-    align-items: flex-start;
-    display: flex;
-}
-
-#about-course .coach-header .coach-title p {
-    font-size: 13px;
-}
-
-#about-course .coach-title p {
-    margin: 0;
-}
-
-#about-course .coach-information {
-    width: 100%;
-    display: block;
-    border-bottom: 1px solid #dddddd;
-    margin-bottom: 10px;
-    padding-bottom: 10px;
-}
-
-#about-course .coach-information:last-child {
-    border-bottom: none;
-}
-
-#about-course .coach-information h4 {
-    font-weight: bold;
-}
-
-#about-course .course-title h3 {
-    font-size: 22px;
-    line-height: 32px;
-    font-weight: bold;
-    margin-top: 0;
-    margin-bottom: 15px;
-}
-
-#about-course .tags-course {
-    padding: 10px;
-    background-color: #ECF0F1;
-    margin-bottom: 10px;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-}
-
-#about-course .tags-course .fa-tags {
-    color: #D94D38;
-}
-
-#about-course .tags-course a {
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-    padding-left: 5px;
-    padding-right: 5px;
-    background-color: #ffffff;
-    border-radius: 10%;
-    -moz-border-radius: 10%;
-    -webkit-border-radius: 10%;
-}
-
-#about-course .subscribe {
-    padding: 5px;
-    text-align: center;
-    border-radius: 5px;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-}
-
-#about-course .info-course {
-    margin-top: 20px;
-    padding-top: 20px;
-}
-
-#about-course .info-course .panel-heading h4 {
-    margin: 0;
-}
-
-#about-course .info-course .title-info {
-    color: #00829C;
-    border-bottom: 1px dotted #eeeeee;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-}
-
-#about-course .info-course .content-info {
-    padding: 10px;
-}
-
-#about-course .extrafield_dt {
-    margin-bottom: 10px;
-}
-
-#about-course .extrafield_dd {
-    color: #666666;
-}
-
-#about-course .socialshare {
-    text-align: center;
-}
-
-#about-course .socialshare .networks {
-    padding-left: 0;
-    list-style: none;
-}
-
-#about-course .socialshare .networks li {
-    padding-right: 2px;
-    padding-left: 2px;
-    margin-bottom: 10px;
-    display: inline-block;
-}
-
-#about-course .socialshare .networks li a {
-    display: block;
-    width: 48px;
-    height: 48px;
-    font-size: 2.3rem;
-    line-height: 18px;
-    text-align: center;
-    color: #FFF;
-    background-color: #337AB7;
-    border-radius: 50%;
-    padding: 10px;
-}
-
-#about-course .socialshare .networks li a:hover {
-    background-color: #286090;
-}
-
-#about-course .course-tags .tag-value {
-    display: inline-block;
-    margin-bottom: 15px;
-}
-
-#about-course .course-tags li span {
-    position: relative;
-    display: inline-block;
-    padding: 0 3px;
-    height: 20px;
-    line-height: 20px;
-    font-size: 1.5rem !important;
-    font-weight: 600 !important;
-    background: #D7E3E6 !important;
-    border-radius: 0 3px 3px 0 !important;
-    -webkit-transition: none 0.15s ease-in-out;
-    -o-transition: none 0.15s ease-in-out;
-    transition: none 0.15s ease-in-out;
-}
-
-#about-course .course-tags li span::before {
-    display: inline-block;
-    content: "";
-    top: 0;
-    left: -8px;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-right: 8px solid #D7E3E6;
-    border-bottom: 10px solid transparent;
-    border-top: 10px solid transparent;
-}
-
-#about-course .course-tags li span::after {
-    z-index: 1;
-    content: "";
-    top: 8px;
-    left: -3px;
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #F2F2F2;
-    border-radius: 10px;
-}
-
-#about-course .panel-tags .panel-body {
-    text-align: center;
-}
-
-#about-course .price-text {
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 40px;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-}
-
-#about-course .buy-box .btn-primary {
-    color: #fff;
-    background-color: #ec5252;
-    border: 1px solid transparent;
-    font-size: 15px;
-    line-height: 1.35135;
-    border-radius: 2px;
-}
-#about-course .course-short{
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-#about-course .course-short ul{
-    display: inline-block;
-    width: 100%;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-#about-course .course-short ul li{
-    display: inline-block;
-}
-#about-course .course-short ul li.author{
-    font-weight: bold;
-    margin-right: 5px;
-}
-#about-course #course-info-top .session-title{
-    margin-top: 10px;
-}
-
 
 /*************** SCROLLBAR BASE CSS ***************/
 

+ 104 - 14
assets/css/scss/_base.scss

@@ -770,7 +770,7 @@ footer {
   }
 }
 
-/******************* Accordion B4 *****************/
+/******************* ACCORDION B4 *****************/
 
 .accordion-b4 {
   .card {
@@ -852,7 +852,7 @@ footer {
   }
 }
 
-/************* SOCIAL *************/
+/****** SOCIAL ******/
 .profile {
   .profile-bg {
     position: absolute;
@@ -913,7 +913,9 @@ footer {
     font-size: 12px;
   }
 }
-/***** CALENDAR ******/
+
+/****** CALENDAR ******/
+
 .fc-day-grid-event{
   border: none;
   padding: 6px 12px 6px 22px;
@@ -922,7 +924,9 @@ footer {
   cursor: pointer;
   border-radius: 4px;
 }
-/********* ACTIONS **********/
+
+/****** ACTIONS ******/
+
 .actions {
   background: #ffffff;
   border: 1px solid #dddddd;
@@ -980,7 +984,8 @@ footer {
     }
   }
 }
-/****** EXERCISE *********/
+/****** EXERCISE ******/
+
 .card-exercise{
   margin-bottom: 20px;
   .list-exercise{
@@ -1027,7 +1032,6 @@ footer {
           border-radius: 5px;
         }
       }
-
       .checkradios
       {
         -webkit-appearance: none;
@@ -1041,7 +1045,6 @@ footer {
         height: 30px;
         width: 30px;
         border: 1px solid #cdcdcd;
-
         cursor: pointer;
         margin-right: 7px;
         outline: none;
@@ -1268,7 +1271,8 @@ footer {
   }
 }
 
-/*** GALERY ***/
+/****** GALERY ******/
+
 .gallery{
   .img-gallery {
     height: 100%;
@@ -1301,7 +1305,7 @@ footer {
   }
 }
 
-/*** EXERCISE RESULTS ***/
+/****** EXERCISE RESULTS ******/
 
 .ribbon {
   display: inline-block;
@@ -1465,7 +1469,7 @@ footer {
 .career p {
   padding-left: 10px;
 }
-/*** WHOISONLINE ***/
+/****** WHOISONLINE ******/
 
 #whoisonline {
   .items-user {
@@ -1485,7 +1489,8 @@ footer {
   }
 }
 
-/***** FORM REGISTER *****/
+/****** FORM REGISTER ******/
+
 .terms-conditions {
   padding: 15px 10px;
   background-color: #DDD;
@@ -1658,7 +1663,8 @@ footer {
   }
 }
 
-/***** BLOG *****/
+/****** BLOG ******/
+
 .blog {
   padding: 0;
   .title-post {
@@ -1716,7 +1722,8 @@ footer {
   }
 }
 
-/***** SOCIAL MEDIA *****/
+/****** SOCIAL MEDIA ******/
+
 .share-social-media {
   background-color: #FFF;
   margin-bottom: 5px;
@@ -1771,7 +1778,7 @@ footer {
   }
 }
 
-/**** FORUM CSS ****/
+/****** FORUM CSS ******/
 
 .forum{
   .number-post {
@@ -1836,3 +1843,86 @@ footer {
     }
   }
 }
+
+/****** ABOUT COURSE AND SESSION ******/
+.about{
+  .share-social-media {
+    padding: 10px 0 0 0;
+    .sharing-buttons {
+      list-style: none;
+      margin: 0 0 10px 0;
+      padding: 0;
+      li{
+        padding-left: 0;
+      }
+    }
+  }
+  .topics{
+    .title-info {
+      margin: 30px 0 20px 0;
+      border-bottom: 1px solid #ddd;
+      padding-bottom: 15px;
+    }
+  }
+  .course-tags{
+    width: 100%;
+    margin-top: 10px;
+    li{
+      span{
+        position: relative;
+        display: inline-block;
+        padding: 0 3px;
+        height: 20px;
+        line-height: 20px;
+        font-weight: 600 !important;
+        background: #D7E3E6 !important;
+        border-radius: 0 3px 3px 0 !important;
+        -webkit-transition: none 0.15s ease-in-out;
+        -o-transition: none 0.15s ease-in-out;
+        transition: none 0.15s ease-in-out;
+        &:before{
+          display: inline-block;
+          content: "";
+          top: 0;
+          left: -8px;
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-right: 8px solid #D7E3E6;
+          border-bottom: 10px solid transparent;
+          border-top: 10px solid transparent;
+        }
+        &:after{
+          z-index: 1;
+          content: "";
+          top: 8px;
+          left: -3px;
+          position: absolute;
+          width: 4px;
+          height: 4px;
+          background-color: #F2F2F2;
+          border-radius: 10px;
+        }
+      }
+    }
+  }
+  .course-short{
+    padding-top: 5px;
+    padding-bottom: 5px;
+    ul{
+      display: inline-block;
+      width: 100%;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      li{
+        display: inline-block;
+        &.author{
+          font-weight: bold;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+}
+

+ 18 - 21
main/template/default/course_home/about.html.twig

@@ -1,5 +1,5 @@
 {% autoescape false %}
-<div id="about-course">
+<div id="about-course" class="about">
     <div id="course-info-top">
         <h2 class="session-title">{{ course.title }}</h2>
         <div class="course-short">
@@ -19,8 +19,8 @@
     {% endif %}
     {% endfor %}
 
-    <div class="panel panel-default">
-        <div class="panel-body">
+    <div class="card">
+        <div class="card-body">
             <div class="row">
                 <div class="col-sm-5">
                     {% if course_video %}
@@ -42,19 +42,19 @@
                             </li>
                             <li>
                                 <a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}"
-                                   target="_blank" class="btn btn-facebook btn-inverse btn-xs">
+                                   target="_blank" class="btn btn-facebook btn-inverse btn-sm">
                                     <em class="fab fa-facebook-square"></em> Facebook
                                 </a>
                             </li>
                             <li>
                                 <a href="https://twitter.com/home?{{ {'status': course.title ~ ' ' ~ url }|url_encode }}"
-                                   target="_blank" class="btn btn-twitter btn-inverse btn-xs">
+                                   target="_blank" class="btn btn-twitter btn-inverse btn-sm">
                                     <em class="fab fa-twitter"></em> Twitter
                                 </a>
                             </li>
                             <li>
                                 <a href="https://www.linkedin.com/shareArticle?{{ {'mini': 'true', 'url': url , 'title': course.title }|url_encode }}"
-                                   target="_blank" class="btn btn-linkedin btn-inverse btn-xs">
+                                   target="_blank" class="btn btn-linkedin btn-inverse btn-sm">
                                     <em class="fab fa-linkedin-in"></em> Linkedin
                                 </a>
                             </li>
@@ -68,17 +68,14 @@
                 </div>
             </div>
             {% if course.tags %}
-                <div class="panel-tags">
-
-                    <ul class="list-inline course-tags">
-                        <li>{{ 'Tags'|get_lang }} :</li>
-                        {% for tag in course.tags %}
-                            <li class="tag-value">
-                                <span>{{ tag.getTag }}</span>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </div>
+                <ul class="list-inline course-tags d-flex flex-row bd-highlight mb-3">
+                    <li class="px-2 bd-highlight">{{ 'Tags'|get_lang }} :</li>
+                    {% for tag in course.tags %}
+                        <li class="px-2 bd-highlight">
+                            <span>{{ tag.getTag }}</span>
+                        </li>
+                    {% endfor %}
+                </ul>
             {% endif %}
         </div>
     </div>
@@ -107,8 +104,8 @@
             </div>
 
             <div class="col-sm-4">
-                <div class="panel panel-default">
-                    <div class="panel-body">
+                <div class="card">
+                    <div class="card-body">
                         {% if is_premium == false %}
                             <h5>{{ 'CourseSubscription'|get_lang }}</h5>
                             <div class="session-subscribe">
@@ -139,8 +136,8 @@
                         {% endif %}
                     </div>
                 </div>
-                <div class="panel panel-default">
-                    <div class="panel-body">
+                <div class="card">
+                    <div class="card-body">
                         <div class="panel-teachers">
                             <h3 class="sub-title">{{ "Coaches"|get_lang }}</h3>
                         </div>