diff --git a/src/ui/page/file/view.jsx b/src/ui/page/file/view.jsx index 4b0e0394a..89df2f8ff 100644 --- a/src/ui/page/file/view.jsx +++ b/src/ui/page/file/view.jsx @@ -219,92 +219,94 @@ class FilePage extends React.Component { ))} -
-

{title}

-
-
- +
+
+

{title}

+
+
+ +
-
-
-
- {claimIsMine && ( -
+ +
+ + +
-
- - +
+
+ +
+ +
+ + + {claimIsMine && ( +

+ {viewCount} {viewCount !== 1 ? __('Views') : __('View')} +

+ )} +
+
+ +
+ + + +
{__('Comments')}
+ +
- -
-
- -
- -
- - - {claimIsMine && ( -

- {viewCount} {viewCount !== 1 ? __('Views') : __('View')} -

- )} +
+
+ +
+ {isRewardContent && } + {nsfw &&
{__('Mature')}
} + +
+
- -
- - - -
{__('Comments')}
- - -
-
-
-
- -
- {isRewardContent && } - {nsfw &&
{__('Mature')}
} - -
-
-
); diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss index 51bb7dbcd..614e78273 100644 --- a/src/ui/scss/component/_main.scss +++ b/src/ui/scss/component/_main.scss @@ -35,41 +35,21 @@ } } +.grid-wrapper { + display: flex; + position: relative; +} + .main--file-page { - display: grid; - grid-template-rows: auto 1fr; - grid-template-columns: 1fr auto; - max-width: calc(100% - var(--side-nav-width) - var(--spacing-main-padding)); + position: relative; - grid-template-areas: - 'content content' - 'info related'; - - .grid-area--content { - width: 100%; - } - - .grid-area--content { - grid-area: content; - } .grid-area--info { - grid-area: info; + margin-right: var(--spacing-large); + width: 50%; } + .grid-area--related { - grid-area: related; - width: 35rem; - } - - @media (max-width: 600px) { - grid-template-areas: - 'content' - 'info' - 'related'; - - .grid-area--related { - grid-area: related; - width: auto; - } + width: calc(50% - var(--spacing-large)); } } diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss index d6dfd06de..6c6e1432b 100644 --- a/src/ui/scss/component/_media.scss +++ b/src/ui/scss/component/_media.scss @@ -56,7 +56,9 @@ .media__title--large { cursor: default; - display: inline; + overflow: hidden; + width: 100%; + text-overflow: ellipsis; font-size: 2rem; line-height: 1.33; margin-right: var(--spacing-small); @@ -86,6 +88,10 @@ justify-content: space-between; } +.media__actions--nowrap { + flex-wrap: nowrap; +} + .media__action-group { > *:not(:last-child) { margin-right: var(--spacing-medium); @@ -110,13 +116,6 @@ } } -// M E D I A -// C O N T E N T - -.media__content--large { - padding-right: var(--spacing-large); -} - // M E D I A // S U B T E X T //