scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #2046 from LiFaytheGoblin/2045/project-page/studio-thumbnails

Browse source 
Fix appearance of studio thumbnails on preview project page
This commit is contained in:
Linda 2018-09-11 10:10:21 -04:00 committed by GitHub
commit a8ebdb7d32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/thumbnail/thumbnail.jsx
View file

@ -74,6 +74,7 @@ const Thumbnail = props => {
<a
href={props.href}
key="titleElement"
title={props.title}
>
{props.title}
</a>

19
src/components/thumbnailcolumn/thumbnailcolumn.scss
View file

@ -5,10 +5,10 @@
$thumbnail-width: 220px;
$thumbnail-inner-width: 204px;
$project-height: 208px;
$gallery-height: 164px;
margin: 0 auto;
padding: 12px 0;
justify-content: flex-start;
@ -16,14 +16,13 @@
.thumbnail {
margin: 7px;
border-radius: 4px;
box-shadow: 0 0 0 1px $active-gray;
background-color: $ui-white;
padding-bottom: 4px;
width: $thumbnail-width;
.thumbnail-image {
margin: 8px auto;
border-radius: 4px;
box-shadow: 0 0 0 1px $active-gray;
background-color: $ui-white;
width: $thumbnail-inner-width;
}
@ -45,10 +44,18 @@
.thumbnail-title {
float: left;
max-width: 164px;
overflow: hidden;
.thumbnail-creator a {
color: $type-gray;
}
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
}
}
}

7
src/views/preview/preview.scss
View file

@ -503,8 +503,11 @@ $stage-width: 480px;
.studio-list {
flex-direction: column;
.project {
margin-bottom: 1.5rem;
.list-title {
margin-left: 1rem;
font-size: 1.2rem;
font-weight: bold;
align-self: flex-start;
}
.creator-image img {

2
src/views/preview/remix-list.jsx
View file

@ -9,7 +9,7 @@ const RemixList = props => {
if (remixes.length === 0) return null;
return (
<FlexRow className="remix-list">
<div className="project-title">
<div className="list-title">
Remixes
</div>
{remixes.length === 0 ? (

4
src/views/preview/studio-list.jsx
View file

@ -8,8 +8,8 @@ const StudioList = props => {
const studios = props.studios;
if (studios.length === 0) return null;
return (
<FlexRow className="remix-list">
<div className="project-title">
<FlexRow className="studio-list">
<div className="list-title">
Studios
</div>
{studios.length === 0 ? (