stuff to fit screen

app/javascript/mastodon/components/status_action_bar.js

@@ -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}

app/javascript/mastodon/features/directory/components/account_card.js

@@ -224,26 +224,31 @@ class AccountCard extends ImmutablePureComponent {
           />
         </div>
 
-        <div className='directory__card__bar'>
+        <div className='columns'>
-          <Permalink
+          <div className='column'>
-            className='directory__card__bar__name'
+            <div className='directory__card__bar'>
-            href={account.get('url')}
+              <Permalink
-            to={`/accounts/${account.get('id')}`}
+                className='directory__card__bar__name'
-          >
+                href={account.get('url')}
-            <Avatar account={account} size={48} />
+                to={`/accounts/${account.get('id')}`}
-            <DisplayName account={account} />
+              >
-          </Permalink>
+                <Avatar account={account} size={48} />
+                <DisplayName account={account} />
+              </Permalink>
 
-          <div className='directory__card__bar__relationship account__relationship'>
+              <div className='directory__card__bar__relationship account__relationship'>
-            {buttons}
+                {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'>

app/javascript/mastodon/features/ui/components/link_footer.js

@@ -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'>
+          <a
-            <div >
+            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'>
+            <div
-                <i className='fa fa-paper-plane' />
+              className='external-utilities'
-                contactez nous
+              id='#external_utilities'
-              </a >
+            >
-              <a href='https://liberapay.com/cipherbliss'><i className='fa fa-coffee' /> Supportez
+              <div >
-                                                                                         Cipherbliss</a >
 
-              <a href='https://peertube.cipherbliss.com'> <i className='fa fa-play ' /> Videos</a >
+                <a href='https://mastodon.cipherbliss.com/@tykayn'>
-              <a href='https://framadate.org/'> <i className='fa fa-calendar' /> FramaDate</a >
+                  <i className='fa fa-paper-plane' />
-              <a href='https://framapad.org/'> <i className='fa fa-file-text' /> Pad</a >
+                  contactez nous
-              <a href='https://framagit.org/tykayn/mastodon'> <i className='fa fa-gitlab' /> Source</a >
+                </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'
+            id='getting_started.invite'
-              defaultMessage='Invite people'
+            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'
+            id='navigation_bar.info'
-              defaultMessage='About this server'
+            defaultMessage='About this server'
           /></a > ·
           </li >
           <li ><a
             href='https://joinmastodon.org/apps'
             target='_blank'
           ><FormattedMessage
-              id='navigation_bar.apps'
+            id='navigation_bar.apps'
-              defaultMessage='Mobile apps'
+            defaultMessage='Mobile apps'
           /></a > ·
           </li >
           <li ><a
             href='/terms'
             target='_blank'
           ><FormattedMessage
-              id='getting_started.terms'
+            id='getting_started.terms'
-              defaultMessage='Terms of service'
+            defaultMessage='Terms of service'
           /></a > ·
           </li >
           <li ><a
             href='/settings/applications'
             target='_blank'
           ><FormattedMessage
-              id='getting_started.developers'
+            id='getting_started.developers'
-              defaultMessage='Developers'
+            defaultMessage='Developers'
           /></a > ·
           </li >
           <li ><a
             href='https://docs.joinmastodon.org'
             target='_blank'
           ><FormattedMessage
-              id='getting_started.documentation'
+            id='getting_started.documentation'
-              defaultMessage='Documentation'
+            defaultMessage='Documentation'
           /></a > ·
           </li >
           <li ><a
             href='/auth/sign_out'
             onClick={this.handleLogoutClick}
           ><FormattedMessage
-              id='navigation_bar.logout'
+            id='navigation_bar.logout'
-              defaultMessage='Logout'
+            defaultMessage='Logout'
           /></a ></li >
         </ul >
 

app/javascript/mastodon/locales/fr.json

@@ -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": "L’envoi de fichiers n’est pas autorisé avec les sondages.",
   "upload_form.audio_description": "Décrire pour les personnes ayant des difficultés d’audition",

app/javascript/styles/bliss/accounts.scss

@@ -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%;
+  }
+}
+}

app/javascript/styles/bliss/admin.scss

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

app/javascript/styles/bliss/basics.scss

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

app/javascript/styles/bliss/components.scss

@@ -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;
+}

app/javascript/styles/bliss/statuses.scss

@@ -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] {
+div[data-component] {
-    width: 100%;
+  width: 100%;
+}
+
+.entry {
+  background: $ui-base-color;
+
+  .account__avatar {
+    max-width: 5em;
   }
 
-  .entry {
+  .detailed-status,
-    background: $ui-base-color;
+  .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: 4px;
-        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;
       }
     }
   }
@@ -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;

app/models/article.rb

@@ -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

app/views/layouts/embedded.html.haml

@@ -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 'bliss', 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 "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
     = render_initial_state

app/views/layouts/error.html.haml

@@ -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

db/migrate/20200724140229_create_articles.rb

@@ -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

db/schema.rb

@@ -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"

spec/fabricators/article_fabricator.rb

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

spec/models/article_spec.rb

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