Skip to content

Commit

Permalink
feat(KUI-1264): cleanup of styles and adjustments to kth-style 10 for…
Browse files Browse the repository at this point in the history 
… start page
  • Loading branch information
@karlandindrakryggen
karlandindrakryggen committed Jun 4, 2024
1 parent 4157537 commit 04f13be
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 189 deletions.
109 changes: 45 additions & 64 deletions public/css/kursinfo-admin-web.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,6 @@
@import 'shared';

//====Common style for both pages====
.kursinfo-main-page {
&.start-page {
nav > a {
padding-left: 5px;
}
}
}

h2 {
margin-bottom: 16px;
Expand All @@ -57,80 +50,68 @@ h2 {
}

//====START ADMIN PAGE WITH CARDS====
// TODO: karl: update start-page in own commit

.AdminPage--Alert {
margin-left: 1rem;
margin-right: 1rem;
.alert {
width: auto;
.AdminStartPage {
.introduction {
@include prose.prose;
p {
margin-bottom: 1.25rem;
max-width: unset;
}
}
& + .AdminPage--Alert > .alert {
margin-top: -40px;
}
}

// 4. Start page and cards style
.AdminPage--ShowDescription {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
.AdminStartPage__cardContainer {
margin-top: 32px;
display: grid;
gap: 20px;

.card {
width: 100%;
margin: 15px 0.5em 1em 0;
.btn {
margin: 1em 0;
}
.btn:last-of-type {
margin-top: 1em;
margin-left: 1em;
}
&:last-of-type {
margin-right: 0;
}
grid-auto-flow: row;
grid-template-columns: auto;
grid-template-rows: auto;

@media (min-width: 1024px) {
grid-auto-flow: column;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr auto;
}
.card-footer.text-right {
min-height: 8.2em;
text-align: right;
span {
display: block;
}

.AdminStartPage__card {
padding: 20px;
border: 1px solid var(--color-border);
}
@media (min-width: 768px) {
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
.card {
width: 65em;
min-width: 18em;
max-width: 30em;
align-content: flex-start;
margin-right: 1.2em;
}
.KursInfo--SellingText.card {
width: 65em;

.AdminStartPage__cardTitle {
@include typography.font-heading-s;
margin-bottom: 20px;
}

.AdminStartPage__cardBody {
@include prose.prose;
> :first-child {
margin-block-start: 0;
}
.card-footer {
padding: 0.75rem 1rem 0.75rem 0.75rem;
.btn.btn-primary {
padding: 0.5rem 1rem;
}
> :last-child {
margin-block-end: 0;
}
}
@media (min-width: 1024px) {
flex-wrap: nowrap;

.AdminStartPage__cardFooter {
display: flex;
align-items: baseline;
justify-content: end;
flex-wrap: wrap;
gap: 10px;
.AdminStartPage__uploadMemoLink {
width: 100%;
text-align: right;
}
}
}

// === CourseEditStartPage ===

.edit-start-page {
.edit-start-page__intro {
.CourseEditStartPage {
.CourseEditStartPage__intro {
margin-bottom: 40px;
}
}
Expand Down
22 changes: 7 additions & 15 deletions public/js/app/components/LinkAndInstruction.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,20 @@
import React from 'react'
import { COURSE_INFO_URL, USER_MANUAL_URL } from '../util/constants'

const LinkToAboutCourseInformation = ({ courseCode, translate, lang, publicPagesHref }) => {
export const LinkToAboutCourseInformation = ({ courseCode, translate, lang, publicPagesHref }) => {
const aboutCourseLink = `${publicPagesHref}${COURSE_INFO_URL}${courseCode}?l=${lang}`

return (
<div className="navigation row">
<nav
className="main col"
aria-label={`${lang === 'en' ? 'Go to About course information ' : 'Gå till Om kursen SF1624 '}${courseCode}`}
lang={lang}
>
<a href={aboutCourseLink} className="kth-button back">
{translate.about_course}
</a>
</nav>
</div>
<nav>
<a href={aboutCourseLink} className="kth-button back">
{translate.about_course}
</a>
</nav>
)
}

export const TextAboutRights = ({ lang, translate }) => (
<div className="introduction col">
<div className="introduction">
<p>{translate.instruction_p1}</p>
<p>{translate.instruction_p2}</p>
<p>
Expand All @@ -32,5 +26,3 @@ export const TextAboutRights = ({ lang, translate }) => (
</p>
</div>
)

export default LinkToAboutCourseInformation
184 changes: 76 additions & 108 deletions public/js/app/pages/AdminStartPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
import { useSearchParams } from 'react-router-dom'
import { Card, CardBody, CardLink, CardTitle, CardText, CardFooter } from 'reactstrap'
import i18n from '../../../../i18n'
import Button from '../components-shared/Button'
import PageTitle from '../components/PageTitle'
import KoppsErrorPage from '../components/KoppsErrorPage'
import LinkToAboutCourseInformation, { TextAboutRights } from '../components/LinkAndInstruction'
import { LinkToAboutCourseInformation, TextAboutRights } from '../components/LinkAndInstruction'
import AlertMsg from '../components/AlertMsg'
import AlertReminderMsg from '../components/AlertReminderMsg'
import AlertReminderMsgNewPubMemo from '../components/AlertReminderMsgNewPubMemo'
Expand Down Expand Up @@ -33,123 +33,91 @@ function AdminStartPage() {
}

return (
<div className="kursinfo-main-page start-page">
<div className="kursinfo-main-page AdminStartPage">
<LinkToAboutCourseInformation
courseCode={courseCode}
lang={lang}
translate={pageTitles}
publicPagesHref={publicPagesHref}
/>

{/* ---COURSE TITEL--- */}
<PageTitle {...pageTitleProps} />

<TextAboutRights lang={lang} translate={pageTitles} />

<div className="AdminPage--Alert">
<AlertMsg
courseCode={courseCode}
querySearchParams={fetchParameters(querySearchParams)}
lang={lang}
translate={pageTitles}
publicPagesHref={publicPagesHref}
/>
</div>
<div className="AdminPage--Alert">
<AlertReminderMsg querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
</div>
<div className="AdminPage--Alert">
<AlertReminderMsgNewPubMemo querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
</div>
<div className="col">
<span className="AdminPage--ShowDescription">
{visibilityLevel === 'all' && (
<Card className="KursInfo--SellingText">
<CardBody>
<CardTitle>
<h4>{startCards.sellingText_hd}</h4>
</CardTitle>
<CardText tag="span">
<p>{startCards.sellingText_desc_p1}</p>
<p>{startCards.sellingText_desc_p2}</p>
</CardText>
</CardBody>
<CardFooter className="text-right">
<a
href={`${ADMIN_ABOUT_COURSE}edit/${courseCode}?l=${lang}`}
aria-label={startCards.sellingText_btn}
className="btn btn-primary"
>
{startCards.sellingText_btn}
</a>
</CardFooter>
</Card>
)}
<Card className="Skapa--Kurs-PM">
<CardBody>
<CardTitle>
<h4>{startCards.coursePM_hd}</h4>
</CardTitle>
<CardText tag="span">
<p>{startCards.coursePM_create_desc_p1}</p>
<p>{startCards.coursePM_create_desc_p2}</p>
<p>{startCards.coursePM_create_desc_p3}</p>
</CardText>
</CardBody>
<CardFooter className="text-right">
<span>
<CardLink
href={`${ADMIN_COURSE_PM_DATA}${courseCode}?l=${lang}`}
className="btn btn-primary"
aria-label={startCards.coursePM_btn_new}
>
{startCards.coursePM_btn_new}
</CardLink>
<CardLink
href={`${ADMIN_COURSE_PM_DATA}published/${courseCode}?l=${lang}`}
className="btn btn-primary"
aria-label={startCards.coursePM_btn_edit}
>
{startCards.coursePM_btn_edit}
</CardLink>
</span>
<span>
<CardLink href={`${ADMIN_COURSE_PM}${courseCode}?l=${lang}`}>
{startCards.coursePM_link_upload_memo}
</CardLink>
</span>
</CardFooter>
</Card>
{visibilityLevel === 'all' && (
<Card className="course-development">
<CardBody>
<CardTitle>
<h4>{startCards.courseDev_hd}</h4>
</CardTitle>
<CardText tag="span">
<p>{startCards.courseDev_decs_p1}</p>
<p>{startCards.courseDev_decs_p2}</p>
</CardText>
</CardBody>
<CardFooter className="text-right">
<a
href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=n&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
className="btn btn-primary"
aria-label={startCards.courseDev_btn_new}
>
{startCards.courseDev_btn_new}
</a>
<a
href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=p&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
className="btn btn-primary"
aria-label={startCards.courseDev_btn_edit}
>
{startCards.courseDev_btn_edit}
</a>
</CardFooter>
</Card>
)}
</span>
<AlertMsg
courseCode={courseCode}
querySearchParams={fetchParameters(querySearchParams)}
lang={lang}
translate={pageTitles}
publicPagesHref={publicPagesHref}
/>
<AlertReminderMsg querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
<AlertReminderMsgNewPubMemo querySearchParams={fetchParameters(querySearchParams)} lang={lang} />

<div className="AdminStartPage__cardContainer">
{visibilityLevel === 'all' && (
<>
<div className="AdminStartPage__card">
<h4 className="AdminStartPage__cardTitle">{startCards.sellingText_hd}</h4>
<div className="AdminStartPage__cardBody">
<p>{startCards.sellingText_desc_p1}</p>
<p>{startCards.sellingText_desc_p2}</p>
</div>
</div>
<div className="AdminStartPage__cardFooter">
<Button variant="primary" href={`${ADMIN_ABOUT_COURSE}edit/${courseCode}?l=${lang}`}>
{startCards.sellingText_btn}
</Button>
</div>
</>
)}

<div className="AdminStartPage__card">
<h4 className="AdminStartPage__cardTitle">{startCards.coursePM_hd}</h4>
<div className="AdminStartPage__cardBody">
<p>{startCards.coursePM_create_desc_p1}</p>
<p>{startCards.coursePM_create_desc_p2}</p>
<p>{startCards.coursePM_create_desc_p3}</p>
</div>
</div>
<div className="AdminStartPage__cardFooter">
<Button variant="primary" href={`${ADMIN_COURSE_PM_DATA}${courseCode}?l=${lang}`}>
{startCards.coursePM_btn_new}
</Button>
<Button variant="primary" href={`${ADMIN_COURSE_PM_DATA}published/${courseCode}?l=${lang}`}>
{startCards.coursePM_btn_edit}
</Button>
<a className="AdminStartPage__uploadMemoLink" href={`${ADMIN_COURSE_PM}${courseCode}?l=${lang}`}>
{startCards.coursePM_link_upload_memo}
</a>
</div>

{visibilityLevel === 'all' && (
<>
<div className="AdminStartPage__card">
<h4 className="AdminStartPage__cardTitle">{startCards.courseDev_hd}</h4>
<div className="AdminStartPage__cardBody">
<p>{startCards.courseDev_decs_p1}</p>
<p>{startCards.courseDev_decs_p2}</p>
</div>
</div>
<div className="AdminStartPage__cardFooter">
<Button
variant="primary"
href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=n&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
>
{startCards.courseDev_btn_new}
</Button>
<Button
variant="primary"
href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=p&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
>
{startCards.courseDev_btn_edit}
</Button>
</div>
</>
)}
</div>
</div>
)
Expand Down
Loading

0 comments on commit 04f13be

Please sign in to comment.