Skip to content

Commit

Permalink
apps/userdashboard/*: small styling fixes fixes #2392
Browse files Browse the repository at this point in the history
  • Loading branch information
@philli-m @goapunk
philli-m authored and goapunk committed Jul 18, 2023
1 parent ff26c9c commit 6cad2c0
Show file tree
Hide file tree
Showing 8 changed files with 62 additions and 40 deletions.
4 changes: 4 additions & 0 deletions adhocracy-plus/assets/scss/_utility.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,10 @@
color: $brand-tertiary;
}

.u-text--gray {
color: $gray;
}

.u-no-transition {
transition: none;
}
Expand Down
17 changes: 14 additions & 3 deletions adhocracy-plus/assets/scss/components/_action.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,24 @@
padding: 0.6em 0;
}

.action__icon {
@include multi-line-icon(2);
.action__icon,
.action__icon--sm {
background-color: $bg-tertiary;
color: $brand-primary;
text-align: center;
}

.action__icon {
@include multi-line-icon(2);
padding: 0 0.5 * $padding;
float: left;
padding: 0 0.2 * $padding;
min-width: 40px;
}

.action__icon--sm {
@include multi-line-icon(1.5);
padding: 0 0.35 * $padding;
width: 32px;
}

.action__main {
Expand Down
8 changes: 5 additions & 3 deletions adhocracy-plus/assets/scss/components/_userdashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@
}

.userdashboard-profile__name {
font-family: $font-family-base;
font-size: $font-size-md;
font-weight: $demi-bold;
overflow-wrap: break-word;
text-transform: none;
margin-top: 0;
}

Expand Down Expand Up @@ -69,7 +71,7 @@
@extend .btn--none;
border: 1px solid $gray-lightest;

@media (min-width: $breakpoint-md) {
@media (min-width: $breakpoint) {
border: none;
}
}
Expand All @@ -78,7 +80,7 @@
.userdashboard-mod-notification__btn + div {
min-width: 100%;

@media (min-width: $breakpoint-md) {
@media (min-width: $breakpoint) {
min-width: revert;
}
}
17 changes: 9 additions & 8 deletions adhocracy-plus/assets/scss/icons/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?jd0zuw');
src: url('../fonts/icomoon.eot?jd0zuw#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?jd0zuw') format('truetype'),
url('../fonts/icomoon.woff?jd0zuw') format('woff'),
url('../fonts/icomoon.svg?jd0zuw#icomoon') format('svg');
font-family: "icomoon";
src: url("../fonts/icomoon.eot?jd0zuw");
src: url("../fonts/icomoon.eot?jd0zuw#iefix") format("embedded-opentype"),
url("../fonts/icomoon.ttf?jd0zuw") format("truetype"),
url("../fonts/icomoon.woff?jd0zuw") format("woff"),
url("../fonts/icomoon.svg?jd0zuw#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
font-family: "icomoon" !important;
speak: none;
font-style: normal;
font-weight: normal;
Expand Down
25 changes: 13 additions & 12 deletions apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotification.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,8 @@ export const ModerationNotification = (props) => {

function translatedReportText (reportsFound) {
const tmp = django.ngettext(
'\'s {}comment{} has been reported 1 time since it\'s creation',
'\'s {}comment{} has been reported %s times since it\'s creation',
'This {}comment{} has been reported 1 time since it\'s creation',
'This {}comment{} has been reported %s times since it\'s creation',
reportsFound
)
return (
Expand Down Expand Up @@ -260,7 +260,13 @@ export const ModerationNotification = (props) => {
<div className="u-border p-4">
<div className="d-flex flex-wrap">
{userImageDiv}
<div className="ms-auto order-lg-last">
<div>
<p className="mb-1">
{userProfileUrl ? <a href={userProfileUrl}>{userName}</a> : userName} {getLink(translated.postedComment, commentUrl)}
</p>
<p className="mb-1">{commentChangeLog}</p>
</div>
<div className="ms-auto">
<div className="dropdown">
<button
title="{% trans 'Notification menu' %}"
Expand All @@ -285,19 +291,14 @@ export const ModerationNotification = (props) => {
</ul>
</div>
</div>
<div>
<p className="m-0">
{userProfileUrl ? <a href={userProfileUrl}>{userName}</a> : userName} {getLink(translated.postedComment, commentUrl)}
</p>
<p className="m-0">{commentChangeLog}</p>
</div>
</div>

{numReports > 0 &&
<div>
<i className="fas fa-exclamation-circle me-1" aria-hidden="true" />
<strong>{userProfileUrl ? <a href={userProfileUrl}>{userName}</a> : userName}</strong>
{getLink(translatedReportText(numReports), commentUrl)}
<p>
<i className="fas fa-exclamation-circle me-1" aria-hidden="true" />
{getLink(translatedReportText(numReports), commentUrl)}
</p>
</div>}

<p>{commentText}</p>
Expand Down
2 changes: 1 addition & 1 deletion apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export default class ModerationNotificationList extends Component {
<h2 className="mt-2">
<a href={projectUrl}>{projectTitle}</a>
</h2>
<span className="text-muted">
<span className="u-text--gray">
{byText}
{organisation}
</span>
Expand Down
4 changes: 2 additions & 2 deletions apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,15 +121,15 @@ export default class ModerationProjects extends Component {
</div>
<div className="tile__body">
<div>
<span className="text-muted">{byText}{item.organisation}</span>
<span className="u-text--gray">{byText}{item.organisation}</span>
<h3 className="tile__title mb-2">
{item.title}
</h3>
{item.access === 1 && <span className="badge badge--dark">{publicText}</span>}
{item.access === 2 && <span className="badge badge--dark">{semiPrivateText}</span>}
{item.access === 3 && <span className="badge badge--dark">{privateText}</span>}
</div>
<div className="row text-muted mt-3">
<div className="row u-text--gray mt-3">
{item.num_reported_unread_comments > 0 && <div className="col-4"><i className="fas fa-exclamation-circle me-1" aria-hidden="true" /> {item.num_reported_unread_comments} <span className="d-none d-lg-inline-block">{reportCountText}</span></div>}
{item.comment_count > 0 && <div className="col-4"><i className="far fa-comment" aria-hidden="true" /> {item.comment_count} <span className="d-none d-lg-inline-block">{commentCountText}</span></div>}
{item.future_phase && !item.active_phase && <div className="col-4"><i className="far fa-clock" aria-hidden="true" /> {item.participation_string}</div>}
Expand Down
25 changes: 14 additions & 11 deletions apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ <h2 class="userdashboard-profile__name">
{{ user.username }}
</h2>
</a>
<div>
<div class="u-text--gray">
{% trans 'Since' %} {{ request.user.date_joined|date:"d M Y" }}
</div>
</div>
Expand All @@ -76,15 +76,15 @@ <h2 class="userdashboard-profile__name">
<h2 class="fs-6">{% trans 'Initiator Organisations' %}</h2>
{% for organisation in request.user.organisations %}
<div>
<a class="btn btn--link text-decoration-none text-muted d-flex align-items-center" href="{% url 'a4dashboard:project-list' organisation_slug=organisation.slug %}">
<a class="btn btn--link text-decoration-none u-text--gray d-flex align-items-center" href="{% url 'a4dashboard:project-list' organisation_slug=organisation.slug %}">
{% if organisation.logo %}
<img
src="{% thumbnail organisation.logo '0x40' %}"
src="{% thumbnail organisation.logo '0x32' %}"
alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}"
/>
{% else %}
<i
class="fas fa-home font--lg action__icon"
class="fas fa-home font--lg action__icon--sm"
role="img"
aria-label="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %} {% trans 'Home' %}"
></i>
Expand Down Expand Up @@ -115,12 +115,12 @@ <h2 class="fs-6">
class="text-decoration-none text-muted d-flex align-items-center mb-2" >
{% if organisation.logo %}
<img
src="{% thumbnail organisation.logo '0x40' %}"
src="{% thumbnail organisation.logo '0x32' %}"
alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}"
/>
{% else %}
<i
class="fas fa-home font--lg action__icon"
class="fas fa-home font--lg action__icon--sm"
role="img"
aria-label="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %} {% trans 'Home' %}"
></i>
Expand All @@ -140,15 +140,15 @@ <h2 class="fs-6">
<h2 class="fs-6">{% trans 'Organisations' %}</h2>
{% if view.organisations %}
{% for organisation in view.organisations %}
<a class="btn btn--link text-decoration-none text-muted d-flex align-items-center" href="{% url 'organisation' organisation_slug=organisation.slug %}">
<a class="btn btn--link text-decoration-none u-text--gray d-flex align-items-center" href="{% url 'organisation' organisation_slug=organisation.slug %}">
{% if organisation.logo %}
<img
src="{% thumbnail organisation.logo '0x40' %}"
src="{% thumbnail organisation.logo '0x32' %}"
alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}"
/>
{% else %}
<i
class="fas fa-home font--lg action__icon"
class="fas fa-home font--lg action__icon--sm"
role="img"
aria-label="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %} {% trans 'Home' %}"
></i>
Expand Down Expand Up @@ -185,10 +185,13 @@ <h2 class="fs-6">
<a href="{% url 'organisation' organisation_slug=organisation.slug %}"
class="text-decoration-none text-muted d-flex align-items-center mb-2" >
{% if organisation.logo %}
<img src="{% thumbnail organisation.logo '0x40' %}" alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}" />
<img
src="{% thumbnail organisation.logo '0x32' %}"
alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}"
/>
{% else %}
<i
class="fas font--lg fa-home action__icon"
class="fas font--lg fa-home action__icon--sm"
role="img"
aria-label="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %} {% trans 'Home' %}"
></i>
Expand Down

0 comments on commit 6cad2c0

Please sign in to comment.