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

fix: certificate detail page styling issues #550

Merged
merged 1 commit into from
Jun 14, 2024
Merged

fix: certificate detail page styling issues #550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 30 additions & 4 deletions cms/static/sass/views/_certificates.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@

.certificate-info-section {
overflow: auto;
display: flex;

.course-title-section,
.course-number-section {
Expand Down Expand Up @@ -154,13 +155,29 @@

position: absolute;
top: $baseline;
right: $baseline;
opacity: 0;

@include rtl {
left: $baseline;
}

// CASE: left to right layout
@include ltr {
right: $baseline;
}

.action {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);

@include rtl {
margin-left: ($baseline/4);
}

// CASE: left to right layout
@include ltr {
margin-right: ($baseline/4);
}

.edit {
@extend %ui-btn-non-blue;
Expand Down Expand Up @@ -419,8 +436,17 @@
}

.wrapper-delete-button {
float: right;
padding: ($baseline/4) ($baseline/2);
// CASE: right to left layout
@include rtl {
float: left;
padding: ($baseline/2) ($baseline/4);
}

// CASE: left to right layout
@include ltr {
float: right;
padding: ($baseline/4) ($baseline/2);
}

.is-disabled {
color: $gray-l3;
Expand Down
6 changes: 3 additions & 3 deletions cms/templates/js/certificate-details.underscore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@
<% if (showDetails) { %>
<section class="certificate-settings course-details">
<header>
<h2 class="title title-2"><%- gettext("Certificate Details") %></h2>
<h2 class="title"><%- gettext("Certificate Details") %></h2>
</header>
<div class='certificate-info-section'>
<div class='course-title-section pull-left'>
<div class='course-title-section'>
<p class="actual-course-title">
<span class="certificate-label"><%- gettext('Course Title') %>: </span>
<span class="certificate-value"><%- course.get('name') %></span>
Expand All @@ -37,7 +37,7 @@
<% } %>
</div>

<div class='course-number-section pull-left'>
<div class='course-number-section'>
<p class="actual-course-number">
<span class="certificate-label"><b><%- gettext('Course Number') %>: </b> </span>
<span class="certificate-value"><%- course.get('num') %></span>
Expand Down
2 changes: 1 addition & 1 deletion cms/templates/js/certificate-editor.underscore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<span id="certificate-description-<%- uniqueId %>-tip" class="tip tip-stacked"><%- gettext("Description of the certificate") %></span>
</div>
<header>
<h2 class="title title-2"><%- gettext("Certificate Details") %></h2>
<h2 class="title"><%- gettext("Certificate Details") %></h2>
</header>
<div class="actual-course-title">
<span class="actual-course-title"><%- gettext("Course Title") %>: </span>
Expand Down
4 changes: 2 additions & 2 deletions lms/templates/certificates/_accomplishment-rendering.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</style>
</head>
<body>
<div class="certificateWrapper" style="font-family:Diodrum">
<div class="certificateWrapper" style="font-family:Diodrum" dir="ltr">
<div class="certificateWrapper__header">
<img
src="./../../static/images/SDAIA-Academy-logo.svg"
Expand All @@ -34,7 +34,7 @@ <h1 class="certificateWrapper__mainTitleWrap">
Saudi Data and AI Authority (SDAIA) Certifies that
</div>
<div class="certificateWrapper__subTitleAR text-align diodrumFontFamily stronger">
:الهيئة السعودية للبيانات والذكاء الاصطناعي ( سدايا ) تمنح
الهيئة السعودية للبيانات والذكاء الاصطناعي ( سدايا ) تمنح
</div>
</div>
<div class="certificateWrapper__personWrap">
Expand Down
Loading