stuff to fit screen

This commit is contained in:
Baptiste Lemoine 2020-07-24 17:04:16 +02:00
parent eef276ce01
commit b64d02798d
16 changed files with 198 additions and 116 deletions

View File

@ -328,7 +328,12 @@ class StatusActionBar extends ImmutablePureComponent {
return (
<div className='status__action-bar'>
<div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /><span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('replies_count'))}</span></div>
<div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
<span className='status__action-bar__counter__label' >
{/*obfuscatedCount {obfuscatedCount(status.get('replies_count'))}*/}
{ (status.get('replies_count'))}
</span>
</div>
<IconButton className='status__action-bar-button' disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
{shareButton}

View File

@ -224,26 +224,31 @@ class AccountCard extends ImmutablePureComponent {
/>
</div>
<div className='directory__card__bar'>
<Permalink
className='directory__card__bar__name'
href={account.get('url')}
to={`/accounts/${account.get('id')}`}
>
<Avatar account={account} size={48} />
<DisplayName account={account} />
</Permalink>
<div className='columns'>
<div className='column'>
<div className='directory__card__bar'>
<Permalink
className='directory__card__bar__name'
href={account.get('url')}
to={`/accounts/${account.get('id')}`}
>
<Avatar account={account} size={48} />
<DisplayName account={account} />
</Permalink>
<div className='directory__card__bar__relationship account__relationship'>
{buttons}
<div className='directory__card__bar__relationship account__relationship'>
{buttons}
</div>
</div>
</div>
<div className='column'>
<div className='directory__card__extra' ref={this.setRef}>
<div
className='account__header__content'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
/>
</div>
</div>
</div>
<div className='directory__card__extra' ref={this.setRef}>
<div
className='account__header__content'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
/>
</div>
<div className='directory__card__extra'>

View File

@ -30,6 +30,7 @@ export default @injectIntl
class LinkFooter extends React.PureComponent {
static propTypes = {
displayMoreLinks : PropTypes.bool,
enableChristmasSnow : PropTypes.bool,
minimumWeekToShowSnow: PropTypes.number,
snowActive : PropTypes.bool,
@ -41,6 +42,7 @@ class LinkFooter extends React.PureComponent {
intl : PropTypes.object.isRequired,
};
static defaultProps = {
displayMoreLinks : false,
enableChristmasSnow : true,
themeIsDark : true,
minimumWeekToShowSnow: 48,
@ -67,6 +69,7 @@ class LinkFooter extends React.PureComponent {
const shouldWeDisplaySnow = (weekNumber > props.minimumWeekToShowSnow) && props.enableChristmasSnow;
this.state = {
displayMoreLinks : false,
enableChristmasSnow: shouldWeDisplaySnow,
theme : props.theme,
};
@ -85,6 +88,11 @@ class LinkFooter extends React.PureComponent {
}
toggleMoreLinks = () => {
this.state.displayMoreLinks = !this.state.displayMoreLinks;
console.log('this.state.displayMoreLinks', this.state.displayMoreLinks)
};
toggleSnow = () => {
if (this.state.snow) {
if (this.state.snowActive) {
@ -130,26 +138,6 @@ class LinkFooter extends React.PureComponent {
<div className='extras'>
{/*<button className='mod-theme btn btn-block btn-small btn-primary pull-left'>*/}
{/* {this.themeIsDark ? (*/}
{/* <span*/}
{/* onClick={this.setState('theme', 'light')}*/}
{/* title='set light'*/}
{/* >*/}
{/* <i className='fa fa-pencil-o' /> to light*/}
{/* </span >*/}
{/* ) : (*/}
{/* <span*/}
{/* onClick={*/}
{/* this.changeTheme*/}
{/* }*/}
{/* title='set dark'*/}
{/* >*/}
{/* <i className='fa fa-pencil' /> to dark*/}
{/* </span >*/}
{/* )}*/}
{/*</button >*/}
{this.state.enableChristmasSnow && (
<div
onClick={this.toggleSnow}
@ -186,36 +174,49 @@ class LinkFooter extends React.PureComponent {
)}
<br />
<div className='external-utilities'>
<div >
<a
href='#external_utilities'
onClick={this.toggleMoreLinks}
>
<i className='fa fa-list-ul'></i > toggle links ( {this.state.displayMoreLinks} )
</a >
{this.state.displayMoreLinks && (
<a href='https://mastodon.cipherbliss.com/@tykayn'>
<i className='fa fa-paper-plane' />
contactez nous
</a >
<a href='https://liberapay.com/cipherbliss'><i className='fa fa-coffee' /> Supportez
Cipherbliss</a >
<div
className='external-utilities'
id='#external_utilities'
>
<div >
<a href='https://peertube.cipherbliss.com'> <i className='fa fa-play ' /> Videos</a >
<a href='https://framadate.org/'> <i className='fa fa-calendar' /> FramaDate</a >
<a href='https://framapad.org/'> <i className='fa fa-file-text' /> Pad</a >
<a href='https://framagit.org/tykayn/mastodon'> <i className='fa fa-gitlab' /> Source</a >
<a href='https://mastodon.cipherbliss.com/@tykayn'>
<i className='fa fa-paper-plane' />
contactez nous
</a >
<a href='https://liberapay.com/cipherbliss'><i className='fa fa-coffee' /> Supportez
Cipherbliss</a >
<a href='https://peertube.cipherbliss.com'> <i className='fa fa-play ' /> Videos</a >
<a href='https://framadate.org/'> <i className='fa fa-calendar' /> FramaDate</a >
<a href='https://framapad.org/'> <i className='fa fa-file-text' /> Pad</a >
<a href='https://framagit.org/tykayn/mastodon'> <i className='fa fa-gitlab' /> Source</a >
</div >
<div className='suggested-tags'>
<ul >
navToTags
</ul >
</div >
</div >
<div className='suggested-tags'>
<ul >
{navToTags}
</ul >
</div >
</div >
)}
</div >
<ul >
{invitesEnabled && <li ><a
href='/invites'
target='_blank'
><FormattedMessage
id='getting_started.invite'
defaultMessage='Invite people'
id='getting_started.invite'
defaultMessage='Invite people'
/></a > · </li >}
{withHotkeys && <li >
<Link to='/keyboard-shortcuts'><FormattedMessage
@ -231,48 +232,48 @@ class LinkFooter extends React.PureComponent {
href='/about/more'
target='_blank'
><FormattedMessage
id='navigation_bar.info'
defaultMessage='About this server'
id='navigation_bar.info'
defaultMessage='About this server'
/></a > ·
</li >
<li ><a
href='https://joinmastodon.org/apps'
target='_blank'
><FormattedMessage
id='navigation_bar.apps'
defaultMessage='Mobile apps'
id='navigation_bar.apps'
defaultMessage='Mobile apps'
/></a > ·
</li >
<li ><a
href='/terms'
target='_blank'
><FormattedMessage
id='getting_started.terms'
defaultMessage='Terms of service'
id='getting_started.terms'
defaultMessage='Terms of service'
/></a > ·
</li >
<li ><a
href='/settings/applications'
target='_blank'
><FormattedMessage
id='getting_started.developers'
defaultMessage='Developers'
id='getting_started.developers'
defaultMessage='Developers'
/></a > ·
</li >
<li ><a
href='https://docs.joinmastodon.org'
target='_blank'
><FormattedMessage
id='getting_started.documentation'
defaultMessage='Documentation'
id='getting_started.documentation'
defaultMessage='Documentation'
/></a > ·
</li >
<li ><a
href='/auth/sign_out'
onClick={this.handleLogoutClick}
><FormattedMessage
id='navigation_bar.logout'
defaultMessage='Logout'
id='navigation_bar.logout'
defaultMessage='Logout'
/></a ></li >
</ul >

View File

@ -431,7 +431,7 @@
"units.short.million": "{count}M",
"units.short.thousand": "{count}K",
"upload_area.title": "Glissez et déposez pour envoyer",
"upload_button.label": "Joindre un média ({formats})",
"upload_button.label": "Joindre un média, image, vidéo ou audio",
"upload_error.limit": "Taille maximale d'envoi de fichier dépassée.",
"upload_error.poll": "Lenvoi de fichiers nest pas autorisé avec les sondages.",
"upload_form.audio_description": "Décrire pour les personnes ayant des difficultés daudition",

View File

@ -13,7 +13,7 @@
&:active,
&:focus {
.card__bar {
background: lighten($ui-base-color, 8%);
background: lighten($ui-base-color, 4%);
}
}
}
@ -339,3 +339,14 @@
display: block;
}
}
.directory__card{
.u-photo{
max-width: 5em;
}
.directory__card__img{
img{
max-width: 100%;
}
}
}

View File

@ -1,6 +1,6 @@
$no-columns-breakpoint: 600px;
$sidebar-width: 240px;
$content-width: 840px;
$sidebar-width: 20vw;
$content-width: 80vw;
.admin-wrapper {
display: flex;

View File

@ -207,3 +207,6 @@ button {
.pull-left {
float: left;
}
.content-heading-actions{
@extend .pull-right;
}

View File

@ -52,7 +52,7 @@
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 10%);
background-color: lighten($ui-highlight-color, 4%);
transition: all 200ms ease-out;
}
@ -6252,3 +6252,8 @@ noscript {
padding: 0.35rem;
}
}
.status__visibility-icon {
float: right;
clear: both;
margin: 1ch;
}

View File

@ -19,55 +19,56 @@
margin: 0;
box-shadow: none;
.detailed-status,
.status {
border-radius: 0 !important;
}
.detailed-status,
.status {
border-radius: 0 !important;
img {
max-width: 100%;
}
}
}
div[data-component] {
width: 100%;
div[data-component] {
width: 100%;
}
.entry {
background: $ui-base-color;
.account__avatar {
max-width: 5em;
}
.entry {
background: $ui-base-color;
.detailed-status,
.status,
.load-more {
animation: none;
}
&:last-child {
.detailed-status,
.status,
.load-more {
animation: none;
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px 4px 0 0;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px 4px 0 0;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px;
}
}
}
@media screen and (max-width: 740px) {
.detailed-status,
.status,
.load-more {
border-radius: 0 !important;
border-radius: 4px;
}
}
}
@ -75,8 +76,17 @@
&--highlighted .entry {
background: lighten($ui-base-color, 8%);
}
@media screen and (max-width: 740px) {
.detailed-status,
.status,
.load-more {
border-radius: 0 !important;
}
}
}
.button.logo-button {
flex: 0 auto;
font-size: 14px;
@ -99,9 +109,8 @@
&:active,
&:focus,
&:hover {
background: lighten($ui-highlight-color, 10%);
background: lighten($ui-highlight-color, 4%);
}
&:disabled,
&.disabled {
&:active,
@ -130,8 +139,13 @@
.public-layout {
.detailed-status {
padding: 15px;
.account__avatar {
max-width: 5em;
}
}
.status {
padding: 15px 15px 15px (48px + 15px * 2);
min-height: 48px + 2px;

12
app/models/article.rb Normal file
View File

@ -0,0 +1,12 @@
# == Schema Information
#
# Table name: articles
#
# id :bigint(8) not null, primary key
# title :string
# text :text
# created_at :datetime not null
# updated_at :datetime not null
#
class Article < ApplicationRecord
end

View File

@ -11,8 +11,8 @@
%link{ rel: 'dns-prefetch', href: storage_host }/
= stylesheet_pack_tag 'common', media: 'all'
-#= stylesheet_pack_tag 'bliss', media: 'all'
-#= stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
= stylesheet_pack_tag 'bliss', media: 'all'
= stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
= render_initial_state

View File

@ -6,7 +6,7 @@
%title= safe_join([yield(:page_title), Setting.default_settings['site_title']], ' - ')
%meta{ content: 'width=device-width,initial-scale=1', name: 'viewport' }/
= stylesheet_pack_tag 'common', media: 'all'
-#= stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
= stylesheet_pack_tag Setting.default_settings['theme'], media: 'all'
= javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
= javascript_pack_tag 'error', integrity: true, crossorigin: 'anonymous'
%body.error

View File

@ -0,0 +1,10 @@
class CreateArticles < ActiveRecord::Migration[5.2]
def change
create_table :articles do |t|
t.string :title
t.text :text
t.timestamps
end
end
end

View File

@ -10,7 +10,7 @@
#
# It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema.define(version: 2020_06_28_133322) do
ActiveRecord::Schema.define(version: 2020_07_24_140229) do
# These are extensions that must be enabled in order to support this database
enable_extension "plpgsql"
@ -242,6 +242,13 @@ ActiveRecord::Schema.define(version: 2020_06_28_133322) do
t.bigint "status_ids", array: true
end
create_table "articles", force: :cascade do |t|
t.string "title"
t.text "text"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
create_table "backups", force: :cascade do |t|
t.bigint "user_id"
t.string "dump_file_name"

View File

@ -0,0 +1,4 @@
Fabricator(:article) do
title "MyString"
text "MyText"
end

View File

@ -0,0 +1,5 @@
require 'rails_helper'
RSpec.describe Article, type: :model do
pending "add some examples to (or delete) #{__FILE__}"
end