eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: icon background and space cleanup

Browse Source
This commit is contained in:
Jannat Patel
2022-03-17 11:25:34 +05:30
parent ef5cf4bd96
commit 36465f0859
5 changed files with 70 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
school/lms/widgets/CourseOutline.html
View File

@@ -29,7 +29,7 @@
{% if membership or lesson.include_in_preview %}
<a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
data-course="{{ course.name }}">
<svg class="icon icon-md">
<svg class="icon icon-md mr-2">
<use class="" href="#{{ lesson.icon }}{% if active %}-blue{% endif %}">
</svg>
{{ lesson.title }}

61
school/public/css/style.css
View File

@@ -76,6 +76,7 @@ input[type=checkbox] {
padding-bottom: 5rem;
min-height: 60vh;
padding-top: 3rem;
background-color: var(--bg-color);
}
.common-card-style {
@@ -107,9 +108,11 @@ input[type=checkbox] {
margin-bottom: 0.5rem;
}
.course-card-meta .icon {
.icon {
margin: 0;
margin-right: 0.25rem;
fill: none;
stroke: none;
}
.course-card-content {
@@ -277,9 +280,17 @@ input[type=checkbox] {
font-size: var(--text-base);
}
@media (max-width: 1000px) {
.course-card-wide {
width: 75%;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.course-card-wide {
width: 100%;
margin: 0;
}
}
@@ -361,11 +372,15 @@ input[type=checkbox] {
margin: 5rem 0 4rem;
}
.course-home-page {
background-color: #FFFFFF;
padding-top: 3.75rem;
}
.chapter-title {
font-weight: 500;
cursor: pointer;
border-radius: var(--border-radius-lg);
padding: 0.55rem 0;
padding: 0.5rem 0;
color: var(--gray-900);
display: flex;
align-items: center;
@@ -388,10 +403,6 @@ input[type=checkbox] {
color: var(--gray-900);
}
.course-description-section {
margin-top: 3.75rem;
}
.lesson-info {
font-size: 16px;
color: var(--gray-900);
@@ -412,12 +423,8 @@ input[type=checkbox] {
border-radius: var(--border-radius-md);
}
.course-content-parent .chapter-title {
font-size: var(--text-md);
}
.course-content-parent .lesson-links {
font-size: var(--text-md);
font-size: var(--text-base);
}
.course-outline {
@@ -564,7 +571,7 @@ input[type=checkbox] {
.breadcrumb {
display: flex;
align-items: center;
font-size: var(--text-md);
font-size: var(--text-base);
line-height: 20px;
color: var(--gray-900);
padding: 1rem 0;
@@ -940,15 +947,15 @@ pre {
background-image: url(/assets/frappe/icons/timeless/search.svg);
border: none;
border-radius: var(--border-radius-md);
font-size: var(--text-sm);
font-size: var(--text-base);
padding: 0.625rem 0.75rem;
height: 36px;
background-repeat: no-repeat;
text-indent: 1.5rem;
background-position: 1rem 0.6rem;
background-position: 1rem 0.7rem;
float: right;
width: 25%;
background-color: var(--gray-100);
box-shadow: var(--shadow-sm);
}
.section-heading {
@@ -1191,6 +1198,7 @@ pre {
.course-intructor-rating-section {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2rem;
}
@@ -1215,10 +1223,10 @@ pre {
z-index: 4;
}
@media (max-width: 768px) {
@media (max-width: 1000px) {
.course-overlay-card {
position: inherit;
margin-top: 1rem;
margin: 1rem auto;
}
.seperator {
@@ -1250,7 +1258,7 @@ pre {
width: 60%;
}
@media (max-width: 768px) {
@media (max-width: 1000px) {
.course-body-container {
width: 100%;
}
@@ -1276,14 +1284,9 @@ pre {
box-shadow: none;
}
.course-creator-name {
font-size: var(--text-xl);
font-weight: 500;
color: var(--gray-900);
}
.course-meta {
font-size: var(--text-base);
color: var(--gray-900);
}
.avg-rating {
@@ -1323,6 +1326,7 @@ pre {
.star-click {
--star-fill: var(--yellow-500);
margin-right: 0;
}
.rating {
@@ -1414,9 +1418,6 @@ pre {
margin-bottom: 0;
}
.lesson-links .icon {
margin: 0;
margin-right: 0.75rem;
fill: none;
stroke: none;
.course-content-parent .course-details-outline .course-home-headings {
display: none;
}

26
school/public/icons/symbol-defs.svg
View File

@@ -1,14 +1,14 @@
<svg id="frappe-symbols" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" class="d-block" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-video" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.17671 5.60232L7.17669 5.60233C6.79257 5.77084 6.51939 6.12992 6.47795 6.55457L6.47559 6.57879V6.60313V11.3969V11.4212L6.47795 11.4455C6.5194 11.8701 6.79261 12.2291 7.17661 12.3976L7.17678 12.3977C7.55766 12.5647 8.00205 12.5257 8.34708 12.2914L11.9637 9.90232C12.2763 9.71171 12.4756 9.37378 12.4756 9C12.4756 8.62622 12.2763 8.28829 11.9637 8.09768L8.34709 5.70857C8.00212 5.4743 7.5577 5.43521 7.17671 5.60232ZM2 9C2 5.134 5.134 2 9 2C10.8565 2 12.637 2.7375 13.9497 4.05025C15.2625 5.36301 16 7.14349 16 9C16 12.866 12.866 16 9 16C5.134 16 2 12.866 2 9Z" stroke="black"/>
</symbol>
<svg id="icon-video-blue" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C10.9891 1.5 12.8968 2.29018 14.3033 3.6967C15.7098 5.10322 16.5 7.01088 16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9ZM8.06846 11.8762L11.6968 9.47937C11.8701 9.37679 11.9756 9.19537 11.9756 9C11.9756 8.80463 11.8701 8.62321 11.6968 8.52063L8.06846 6.12375C7.86658 5.9855 7.60312 5.96127 7.37756 6.06021C7.152 6.15916 6.99871 6.36619 6.97559 6.60313V11.3969C6.99871 11.6338 7.152 11.8408 7.37756 11.9398C7.60312 12.0387 7.86658 12.0145 8.06846 11.8762Z" fill="#2D95F0"/>
<svg id="icon-video" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.91624 5.11694L6.91622 5.11695C6.47722 5.30953 6.16502 5.71991 6.11766 6.20522L6.11496 6.2329V6.26072V11.7393V11.7671L6.11766 11.7949C6.16503 12.2801 6.47727 12.6904 6.91613 12.883L6.91632 12.8831C7.35161 13.0739 7.85949 13.0294 8.25381 12.7616L12.3871 10.0312C12.7443 9.81338 12.9721 9.42718 12.9721 9C12.9721 8.57282 12.7443 8.18662 12.3871 7.96878L8.25382 5.23837C7.85957 4.97063 7.35166 4.92595 6.91624 5.11694ZM1 9C1 4.58171 4.58171 1 9 1C11.1217 1 13.1566 1.84286 14.6568 3.34314C16.1571 4.84344 17 6.87827 17 9C17 13.4183 13.4183 17 9 17C4.58171 17 1 13.4183 1 9Z" stroke="black"/>
</svg>
<symbol xmlns="http://www.w3.org/2000/svg" id="icon-quiz" viewBox="0 0 1024 1024" stroke="#1F272E">
<svg id="icon-video-blue" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 9C1 4.58172 4.58172 1 9 1C11.1217 1 13.1566 1.84286 14.6569 3.34315C16.1571 4.84343 17 6.87827 17 9C17 13.4182 13.4182 17 9 17C4.58172 17 1 13.4182 1 9ZM8.00636 12.0679L11.8766 9.51133C12.0614 9.40191 12.174 9.2084 12.174 9C12.174 8.79161 12.0614 8.59809 11.8766 8.48867L8.00636 5.932C7.79102 5.78453 7.51 5.75869 7.2694 5.86422C7.0288 5.96977 6.86529 6.1906 6.84063 6.44334V11.5567C6.86529 11.8094 7.0288 12.0302 7.2694 12.1358C7.51 12.2413 7.79102 12.2155 8.00636 12.0679Z" fill="#2D95F0"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" id="icon-quiz" viewBox="0 0 1024 1024" stroke="#1F272E">
<path d="M512 0C229.232 0 0 229.232 0 512c0 282.784 229.232 512 512 512 282.784 0 512.017-229.216 512.017-512C1024.017 229.232 794.785 0 512 0zm0 961.008c-247.024 0-448-201.984-448-449.01 0-247.024 200.976-448 448-448s448.017 200.977 448.017 448S759.025 961.009 512 961.009zm-47.056-160.529h80.512v-81.248h-80.512zm46.112-576.944c-46.88 0-85.503 12.64-115.839 37.889-30.336 25.263-45.088 75.855-44.336 117.775l1.184 2.336h73.44c0-25.008 8.336-60.944 25.008-73.84 16.656-12.88 36.848-19.328 60.56-19.328 27.328 0 48.336 7.424 63.073 22.271 14.72 14.848 22.063 36.08 22.063 63.664 0 23.184-5.44 42.976-16.368 59.376-10.96 16.4-29.328 39.841-55.088 70.322-26.576 23.967-42.992 43.231-49.232 57.807-6.256 14.592-9.504 40.768-9.744 78.512h76.96c0-23.68 1.503-41.136 4.496-52.336 2.975-11.184 11.504-23.823 25.568-37.888 30.224-29.152 54.496-57.664 72.88-85.551 18.336-27.857 27.52-58.593 27.52-92.193 0-46.88-14.176-83.408-42.577-109.568-28.416-26.176-68.272-39.248-119.568-39.248z" fill="#1F272E"/>
</symbol>
<symbol id="icon-quiz-blue" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>
<svg id="icon-quiz-blue" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1511_749)">
<path d="M512 0C229.232 0 0 229.232 0 512C0 794.784 229.232 1024 512 1024C794.784 1024 1024.02 794.784 1024.02 512C1024.02 229.232 794.785 0 512 0ZM512 961.008C264.976 961.008 64 759.024 64 511.998C64 264.974 264.976 63.998 512 63.998C759.024 63.998 960.017 264.975 960.017 511.998C960.017 759.021 759.025 961.009 512 961.009V961.008ZM464.944 800.479H545.456V719.231H464.944V800.479ZM511.056 223.535C464.176 223.535 425.553 236.175 395.217 261.424C364.881 286.687 350.129 337.279 350.881 379.199L352.065 381.535H425.505C425.505 356.527 433.841 320.591 450.513 307.695C467.169 294.815 487.361 288.367 511.073 288.367C538.401 288.367 559.409 295.791 574.146 310.638C588.866 325.486 596.209 346.718 596.209 374.302C596.209 397.486 590.769 417.278 579.841 433.678C568.881 450.078 550.513 473.519 524.753 504C498.177 527.967 481.761 547.231 475.521 561.807C469.265 576.399 466.017 602.575 465.777 640.319H542.737C542.737 616.639 544.24 599.183 547.233 587.983C550.208 576.799 558.737 564.16 572.801 550.095C603.025 520.943 627.297 492.431 645.681 464.544C664.017 436.687 673.201 405.951 673.201 372.351C673.201 325.471 659.025 288.943 630.624 262.783C602.208 236.607 562.352 223.535 511.056 223.535V223.535Z" fill="#2D95F0" stroke="#2D95F0"/>
</g>
@@ -17,11 +17,11 @@
<rect width="1024" height="1024" fill="white"/>
</clipPath>
</defs>
</symbol>
<symbol id="icon-list-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>
<svg id="icon-list-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66699 3.25C2.46808 3.25 2.27731 3.32902 2.13666 3.46967C1.99601 3.61032 1.91699 3.80109 1.91699 4C1.91699 4.19891 1.99601 4.38968 2.13666 4.53033C2.27731 4.67098 2.46808 4.75 2.66699 4.75H2.67399C2.8729 4.75 3.06367 4.67098 3.20432 4.53033C3.34497 4.38968 3.42399 4.19891 3.42399 4C3.42399 3.80109 3.34497 3.61032 3.20432 3.46967C3.06367 3.32902 2.8729 3.25 2.67399 3.25H2.66699ZM5.33299 3.5C5.20038 3.5 5.07321 3.55268 4.97944 3.64645C4.88567 3.74021 4.83299 3.86739 4.83299 4C4.83299 4.13261 4.88567 4.25979 4.97944 4.35355C5.07321 4.44732 5.20038 4.5 5.33299 4.5H14C14.1326 4.5 14.2598 4.44732 14.3535 4.35355C14.4473 4.25979 14.5 4.13261 14.5 4C14.5 3.86739 14.4473 3.74021 14.3535 3.64645C14.2598 3.55268 14.1326 3.5 14 3.5H5.33299ZM5.33299 7.5C5.20038 7.5 5.07321 7.55268 4.97944 7.64645C4.88567 7.74021 4.83299 7.86739 4.83299 8C4.83299 8.13261 4.88567 8.25979 4.97944 8.35355C5.07321 8.44732 5.20038 8.5 5.33299 8.5H14C14.1326 8.5 14.2598 8.44732 14.3535 8.35355C14.4473 8.25979 14.5 8.13261 14.5 8C14.5 7.86739 14.4473 7.74021 14.3535 7.64645C14.2598 7.55268 14.1326 7.5 14 7.5H5.33299ZM4.83299 12C4.83299 11.8674 4.88567 11.7402 4.97944 11.6464C5.07321 11.5527 5.20038 11.5 5.33299 11.5H14C14.1326 11.5 14.2598 11.5527 14.3535 11.6464C14.4473 11.7402 14.5 11.8674 14.5 12C14.5 12.1326 14.4473 12.2598 14.3535 12.3536C14.2598 12.4473 14.1326 12.5 14 12.5H5.33299C5.20038 12.5 5.07321 12.4473 4.97944 12.3536C4.88567 12.2598 4.83299 12.1326 4.83299 12ZM1.91699 8C1.91699 7.80109 1.99601 7.61032 2.13666 7.46967C2.27731 7.32902 2.46808 7.25 2.66699 7.25H2.67399C2.8729 7.25 3.06367 7.32902 3.20432 7.46967C3.34497 7.61032 3.42399 7.80109 3.42399 8C3.42399 8.19891 3.34497 8.38968 3.20432 8.53033C3.06367 8.67098 2.8729 8.75 2.67399 8.75H2.66699C2.46808 8.75 2.27731 8.67098 2.13666 8.53033C1.99601 8.38968 1.91699 8.19891 1.91699 8V8ZM2.66699 11.25C2.46808 11.25 2.27731 11.329 2.13666 11.4697C1.99601 11.6103 1.91699 11.8011 1.91699 12C1.91699 12.1989 1.99601 12.3897 2.13666 12.5303C2.27731 12.671 2.46808 12.75 2.66699 12.75H2.67399C2.8729 12.75 3.06367 12.671 3.20432 12.5303C3.34497 12.3897 3.42399 12.1989 3.42399 12C3.42399 11.8011 3.34497 11.6103 3.20432 11.4697C3.06367 11.329 2.8729 11.25 2.67399 11.25H2.66699Z" fill="#2D95F0"/>
</symbol>
<symbol id="icon-lock-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>
<svg id="icon-lock-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.077 1.45H8.022C7.13244 1.44174 6.27599 1.78701 5.64088 2.40993C5.00577 3.03285 4.64397 3.88244 4.635 4.772V5.122H3.75C3.21957 5.122 2.71086 5.33271 2.33579 5.70779C1.96071 6.08286 1.75 6.59157 1.75 7.122V12.513C1.75 13.0434 1.96071 13.5521 2.33579 13.9272C2.71086 14.3023 3.21957 14.513 3.75 14.513H12.289C12.8194 14.513 13.3281 14.3023 13.7032 13.9272C14.0783 13.5521 14.289 13.0434 14.289 12.513V7.122C14.289 6.59157 14.0783 6.08286 13.7032 5.70779C13.3281 5.33271 12.8194 5.122 12.289 5.122H11.404V4.837C11.4123 3.94744 11.067 3.09099 10.4441 2.45588C9.82115 1.82077 8.97156 1.45898 8.082 1.45H8.077ZM10.404 5.122V4.83C10.4104 4.20548 10.1686 3.60398 9.73166 3.15769C9.29475 2.71141 8.69851 2.45686 8.074 2.45H8.014C7.38948 2.4436 6.78798 2.68543 6.34169 3.12234C5.89541 3.55925 5.64086 4.15549 5.634 4.78V5.122H10.404ZM3.75 6.122C3.48478 6.122 3.23043 6.22736 3.04289 6.41489C2.85536 6.60243 2.75 6.85678 2.75 7.122V12.513C2.75 12.7782 2.85536 13.0326 3.04289 13.2201C3.23043 13.4076 3.48478 13.513 3.75 13.513H12.289C12.5542 13.513 12.8086 13.4076 12.9961 13.2201C13.1836 13.0326 13.289 12.7782 13.289 12.513V7.122C13.289 6.85678 13.1836 6.60243 12.9961 6.41489C12.8086 6.22736 12.5542 6.122 12.289 6.122H3.75ZM8.02 10.391C8.1721 10.391 8.31797 10.3306 8.42553 10.223C8.53308 10.1155 8.5935 9.9696 8.5935 9.8175C8.5935 9.6654 8.53308 9.51953 8.42553 9.41197C8.31797 9.30442 8.1721 9.244 8.02 9.244C7.8679 9.244 7.72203 9.30442 7.61447 9.41197C7.50692 9.51953 7.4465 9.6654 7.4465 9.8175C7.4465 9.9696 7.50692 10.1155 7.61447 10.223C7.72203 10.3306 7.8679 10.391 8.02 10.391V10.391ZM9.593 9.817C9.593 10.2343 9.42722 10.6345 9.13213 10.9296C8.83704 11.2247 8.43682 11.3905 8.0195 11.3905C7.60218 11.3905 7.20196 11.2247 6.90687 10.9296C6.61178 10.6345 6.446 10.2343 6.446 9.817C6.446 9.39968 6.61178 8.99946 6.90687 8.70437C7.20196 8.40928 7.60218 8.2435 8.0195 8.2435C8.43682 8.2435 8.83704 8.40928 9.13213 8.70437C9.42722 8.99946 9.593 9.39968 9.593 9.817V9.817Z" fill="#2D95F0"/>
</symbol>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

16
school/www/batch/learn.html
View File

@@ -15,7 +15,7 @@
{% block content %}
<div class="common-page-style">
<div class="container course-details-page">
{{ widgets.BreadCrumb(course=course, lesson=lesson) }}
{{ BreadCrumb(course, lesson) }}
<div class="course-content-parent">
<div class="course-details-outline">
{{ widgets.CourseOutline(course=course, membership=membership) }}
@@ -32,6 +32,16 @@
</div>
{% endblock %}
{% macro BreadCrumb(course, lesson) %}
<div class="breadcrumb">
<a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
<img class="ml-1 mr-1" src="/assets/school/icons/chevron-right.svg">
<a class="dark-links" href="/courses">{{ course.title }}</a>
<img class="ml-1 mr-1" src="/assets/school/icons/chevron-right.svg">
<span class="breadcrumb-destination">{{ lesson.title }}</span>
</div>
{% endmacro %}
{% macro LessonContent(lesson) %}
{% set instructors = get_instructors(course.name) %}
{% set is_instructor = is_instructor(course.name) %}
@@ -57,8 +67,8 @@
</div>
{% endif %}
{% endfor %}
<a class="button-links ml-2" href="{{ get_profile_url(instructors[0].username) }}">
<span class="course-creator-name">
<a class="button-links ml-1" href="{{ get_profile_url(instructors[0].username) }}">
<span class="course-meta">
{% if ins_len == 1 %}
{{ instructors[0].full_name }}
{% else %}

26
school/www/courses/course.html
View File

@@ -6,15 +6,17 @@
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
{% endblock %}
{% block content %}
<div class="common-page-style pt-0">
<div class="common-page-style pt-0 pb-0">
<div class="course-home-top-container">
{{ CourseHomeHeader(course) }}
<div class="container course-home-page">
<div class="course-body-container">
{{ CourseHeaderOverlay(course) }}
{{ Description(course) }}
{{ widgets.CourseOutline(course=course, membership=membership) }}
{{ widgets.Reviews(course=course, membership=membership) }}
<div class="course-home-page">
<div class="container">
<div class="course-body-container">
{{ CourseHeaderOverlay(course) }}
{{ Description(course) }}
{{ widgets.CourseOutline(course=course, membership=membership) }}
{{ widgets.Reviews(course=course, membership=membership) }}
</div>
</div>
</div>
</div>
@@ -65,25 +67,21 @@
<div class="course-intructor-rating-section">
<div class="vertically-center">
<svg class="icon icon-md mr-1">
<svg class="icon icon-md">
<use class="" href="#icon-users">
</svg>
{{ get_students(course.name) | length }} {{ _("Enrolled") }}
</div>
<span class="seperator"></span>
{% if get_lessons(course.name) | length %}
<div class="vertically-center">
<svg class="icon icon-md mr-1">
<svg class="icon icon-md">
<use href="#icon-education"></use>
</svg>
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
</div>
{% endif %}
<span class="seperator"></span>
{% set avg_rating = get_average_rating(course.name) %}
{% if avg_rating %}
<div class="rating mr-2">
@@ -92,8 +90,8 @@
<use href="#icon-star"></use>
</svg>
{% endfor %}
<span> {{ avg_rating }} {{ _(" Rating ") }} </span>
</div>
<span> {{ avg_rating }} {{ _(" Rating ") }} </span>
{% endif %}
</div>