Skip to content

Commit

Permalink
Allow for clickable links in space description
Browse files Browse the repository at this point in the history
Closes #361
  • Loading branch information
HarveyKandola committed Feb 4, 2020
1 parent 8ac35a6 commit d1774b4
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 168 deletions.
241 changes: 124 additions & 117 deletions gui/app/styles/core/view/spaces.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,122 +3,129 @@
margin: 0;
padding: 0;

> a {
> .item {
@include card();
list-style-type: none;
margin: 0 0 2rem 0;
padding: 15px 20px;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
@include border-radius(16px);

> .info {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
align-self: self-start;
justify-self: self-start;

> .name {
font-size: 1.4rem;
font-weight: 700;
color: map-get($gray-shades, 800);

> .icon {
color: map-get($gray-shades, 700);
font-size: 26px;
vertical-align: middle;
display: inline-block;
margin-right: 10px;
}
}

> .desc {
font-size: 1.1rem;
font-weight: 400;
margin-top: 0.4rem;
color: $color-black-light-3;
}

> .meta {
padding: 15px 0 0 0;

> .dicon {
color: map-get($gray-shades, 600);
font-size: 20px;
margin-right: 20px;
vertical-align: middle;
}

> .space-label {
@include border-radius(3px);
@extend .no-select;
display: inline-block;
margin: 10px 0 13px 0;
padding: 0.3rem 0.7rem;
font-size: 1.1rem;
font-weight: 400;
color: map-get($gray-shades, 100);
}
}
}

> .stats {
grid-column-start: 1;
grid-row-start: 2;
padding: 0;
align-self: self-start;
justify-self: self-start;

> .stat {
text-align: center;
display: inline-block;
margin: 5px 30px 5px 0;

> .number {
font-size: 1.7rem;
font-weight: 700;
color: map-get($gray-shades, 600);
}

> .label {
font-size: 0.9rem;
font-weight: 500;
color: map-get($gray-shades, 600);
text-transform: uppercase;
}
}
}

@media (min-width: $display-break-2) {
grid-template-columns: 8fr 2fr;
grid-template-rows: 1fr;

> .info {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
}

> .stats {
grid-column-start: 2;
grid-row-start: 1;
padding: 0;
justify-self: self-end;

> .stat, > .number, > .label {
display: block;
}

> .stat {
margin: 5px 0;
}
}
}
}
}
> .item {
@include card();
list-style-type: none;
margin: 0 0 2rem 0;
padding: 15px 20px;
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr;
@include border-radius(16px);

> .info {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
align-self: self-start;
justify-self: self-start;
width: 100%;

> a {
> .name {
font-size: 1.4rem;
font-weight: 700;
color: map-get($gray-shades, 800);

> .icon {
color: map-get($gray-shades, 700);
font-size: 26px;
vertical-align: middle;
display: inline-block;
margin-right: 10px;
}
}
}

> .desc {
font-size: 1.1rem;
font-weight: 400;
margin-top: 0.4rem;
color: $color-black-light-3;
}

> a {
> .meta {
padding: 15px 0 0 0;

> .dicon {
color: map-get($gray-shades, 600);
font-size: 20px;
margin-right: 20px;
vertical-align: middle;
}

> .space-label {
@include border-radius(3px);
@extend .no-select;
display: inline-block;
margin: 10px 0 13px 0;
padding: 0.3rem 0.7rem;
font-size: 1.1rem;
font-weight: 400;
color: map-get($gray-shades, 100);
}
}
}
}

> a {
> .stats {
grid-column-start: 1;
grid-row-start: 2;
padding: 0;
align-self: self-start;
justify-self: self-start;

> .stat {
text-align: center;
display: inline-block;
margin: 5px 30px 5px 0;

> .number {
font-size: 1.7rem;
font-weight: 700;
color: map-get($gray-shades, 600);
}

> .label {
font-size: 0.9rem;
font-weight: 500;
color: map-get($gray-shades, 600);
text-transform: uppercase;
}
}
}
}

@media (min-width: $display-break-2) {
grid-template-columns: 8fr 2fr;
grid-template-rows: 1fr;

> .info {
grid-column-start: 1;
grid-row-start: 1;
padding: 0;
}

> a {
> .stats {
grid-column-start: 2;
grid-row-start: 1;
padding: 0;
justify-self: self-end;

> .stat, > .number, > .label {
display: block;
}

> .stat {
margin: 5px 0;
}
}
}
}
}
}
}
106 changes: 55 additions & 51 deletions gui/app/templates/components/spaces/space-list.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -15,57 +15,61 @@

<ul class="list">
{{#each spaces as |space|}}
{{#link-to "folder.index" space.id space.slug}}
<li class="item">
<div class="info">
<div class="name">
{{#if space.icon}}
<div class="icon">
{{ui/ui-icon-meta icon=space.icon}}
</div>
{{/if}}
{{space.name}}
</div>
{{#if (not-eq viewDensity "3")}}
<div class="desc">{{{space.desc}}}</div>
{{/if}}
{{#if (eq viewDensity "1")}}
<div class="meta">
{{!-- {{#if (eq space.spaceType constants.SpaceType.Public)}}
<i class={{concat "dicon " constants.Icon.World}}>
{{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}}
</i>
{{/if}}
{{#if (eq space.spaceType constants.SpaceType.Protected)}}
<i class={{concat "dicon " constants.Icon.People}}>
{{#attach-tooltip showDelay=1000}}Protected space{{/attach-tooltip}}
</i>
{{/if}}
{{#if (eq space.spaceType constants.SpaceType.Private)}}
<i class={{concat "dicon " constants.Icon.Person}}>
{{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}}
</i>
{{/if}} --}}
{{#if space.labelId}}
{{spaces/space-label labels=labels labelId=space.labelId}}
{{/if}}
</div>
{{/if}}
</div>
{{#if (eq viewDensity "1")}}
<div class="stats">
<div class="stat">
<div class="number">{{space.countContent}}</div>
<div class="label">items</div>
</div>
<div class="stat">
<div class="number">{{space.countCategory}}</div>
<div class="label">categories</div>
</div>
</div>
{{/if}}
</li>
{{/link-to}}
<li class="item">
<div class="info">
{{#link-to "folder.index" space.id space.slug}}
<div class="name">
{{#if space.icon}}
<div class="icon">
{{ui/ui-icon-meta icon=space.icon}}
</div>
{{/if}}
{{space.name}}
</div>
{{/link-to}}
{{#if (not-eq viewDensity "3")}}
<div class="desc">{{{space.desc}}}</div>
{{/if}}
{{#if (eq viewDensity "1")}}
{{#link-to "folder.index" space.id space.slug}}
<div class="meta">
{{!-- {{#if (eq space.spaceType constants.SpaceType.Public)}}
<i class={{concat "dicon " constants.Icon.World}}>
{{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}}
</i>
{{/if}}
{{#if (eq space.spaceType constants.SpaceType.Protected)}}
<i class={{concat "dicon " constants.Icon.People}}>
{{#attach-tooltip showDelay=1000}}Protected space{{/attach-tooltip}}
</i>
{{/if}}
{{#if (eq space.spaceType constants.SpaceType.Private)}}
<i class={{concat "dicon " constants.Icon.Person}}>
{{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}}
</i>
{{/if}} --}}
{{#if space.labelId}}
{{spaces/space-label labels=labels labelId=space.labelId}}
{{/if}}
</div>
{{/link-to}}
{{/if}}
</div>
{{#if (eq viewDensity "1")}}
{{#link-to "folder.index" space.id space.slug}}
<div class="stats">
<div class="stat">
<div class="number">{{space.countContent}}</div>
<div class="label">items</div>
</div>
<div class="stat">
<div class="number">{{space.countCategory}}</div>
<div class="label">categories</div>
</div>
</div>
{{/link-to}}
{{/if}}
</li>
{{/each}}
</ul>

Expand Down

0 comments on commit d1774b4

Please sign in to comment.