Merge pull request #311 from Catrobat/develop

Release v2.1.0

.env

@@ -21,7 +21,7 @@ MAILER_URL=null://localhost
 ###< symfony/swiftmailer-bundle ###
 
 # Version Number
-APP_VERSION=2.0.10
+APP_VERSION=2.1.0
 
 # Define the App Environment
 APP_ENV=prod
@@ -31,3 +31,10 @@ DEPLOY_GIT=https://github.com/Catrobat/Catroweb-Symfony.git
 
 # WEBHOOK has to be in .env.local
 SLACK_WEBHOOK=xxxx
+
+# Ask your friendly coordinator for credentials to deploy to the servers
+#DEPLOY_SHARE=
+#DEPLOY_WEBTEST=
+#DEPLOY_WEBTEST_BRANCH=
+#DEPLOY_POREVIEW=
+#DEPLOY_POREVIEW_BRANCH=

CHANGELOG.md

@@ -0,0 +1,40 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [2.1.0]
+### Added
+- Program Owner now visible on small devices too.
+- User Badge in the sidebar will be updated immediately after marking a notification as read.
+- Media Library assets now will be shown by name if no thumbnail is given.
+- Media Library assets(sounds) can now be played without download.
+- "Show Password" option added for login.
+- Production logs are now rotating.
+- Deployment script adapted for more privacy and more modularity.
+- On the profile page all programs are loaded at once, are ordered and all own programs will be displayed.
+- Headlines are now centered through out all designs.
+- Programs that are uploaded ar no longer set to private if languageVersion is higher than supported.
+### Changed
+- Recommended Program section will only be displayed if programs for this section exist.
+- Recommender System diversity enriched.
+- Complete change of Media-Library (new Ajax Loading, sorting)
+- Hardcoded translations switched to dynamic translations
+- Usernames are now consistently visible in program details.
+### Removed
+- Project documentation removed from repo and relocated to github wiki.
+### Fixed
+- Tooltip is now displayed once not twice.
+- Media-Library files are named correctly on download. (Filename not ID, works only in browser)
+- Notification badge in the sidebar will now be displayed correctly.
+- Clean logs command fixed.
+- Limiting text to display width.
+- DB Migration fixed to work correct.
+- Follow Icon gets positioned correctly again.
+- Color of text in search field is adjusted for "Luna & Cat"
+
+[Unreleased]: https://github.com/Catrobat/Catroweb-Symfony/compare/v2.1.0...HEAD
+[2.1.0]: https://github.com/olivierlacan/keep-a-changelog/releases/tag/v2.1.0

assets/css/base/_brain.scss

@@ -1,5 +1,6 @@
 @import "elements";
 @import "variables";
+@import "mixins";
 @import "theme_settings";
 
 @font-face {
@@ -446,3 +447,7 @@ $program-tile-width: 85px;
   display: block;
   background: $primary;
 }
+
+.force-word-break {
+  @include force-word-break();
+}

assets/css/base/_catro_bootstrap.scss

@@ -60,6 +60,7 @@ header {
     &:focus {
       background-color: rgba(0, 0, 0, 0.1);
       border: 1px rgba(0, 0, 0, 0.2) solid;
+      color: white;
 
       & + .catro-search-button {
         background-color: rgba(0, 0, 0, 0.1);

assets/css/base/_footer.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 @import 'theme_settings';
 
 $margin-adjustment: -5px;
@@ -89,8 +90,7 @@ $margin-adjustment: -5px;
   h4 {
     font-weight: 500;
     color: $footer-color;
-    hyphens: auto;
-    word-wrap: break-word;
+    @include force-word-break();
   }
 }
 

assets/css/base/_header.scss

@@ -63,10 +63,6 @@ header {
       text-overflow: ellipsis;
     }
 
-    .user-notification-badge-font {
-      font-size: 11px;
-    }
-
     #custom-avatar {
       border: 2px solid #FFF;
       border-radius: 2px;
@@ -88,3 +84,7 @@ header {
     }
   }
 }
+
+.btn-search {
+  color: $default-background-color!important
+}

assets/css/base/_mixins.scss

@@ -1,14 +1,23 @@
-@mixin transition($transition){
+@mixin transition($transition) {
   -webkit-transition: $transition;
   -moz-transition: $transition;
   -o-transition: $transition;
   transition: $transition;
 }
 
-@mixin transform($string){
+@mixin transform($string) {
   -webkit-transform: $string;
   -moz-transform: $string;
   -ms-transform: $string;
   -o-transform: $string;
   transform: $string;
+}
+
+@mixin force-word-break() {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
 }

assets/css/base/_sidebar.scss

@@ -53,6 +53,9 @@ $sidebar-width: 250px;
         text-decoration: none;
       }
 
+      .user-notification-badge {
+        display: none;
+      }
     }
   }
 

assets/css/custom/help.scss

@@ -1,5 +1,6 @@
 @import '../../../public/bootstrap_vendor/scss/functions';
-@import '../base/_variables';
+@import '../base/variables';
+@import '../base/mixins';
 @import '../../../public/bootstrap_vendor/scss/variables';
 @import '../../../public/bootstrap_vendor/scss/mixins';
 @import "../base/elements";
@@ -574,9 +575,7 @@
     span {
       padding: $tutorialcard-padding;
       text-align: center;
-      word-break: break-word;
-      word-wrap: break-word;
-      hyphens: auto;
+      @include force-word-break();
     }
   }
 }

assets/css/custom/index.scss

@@ -16,6 +16,10 @@ h1 {
   }
 }
 
+#recommended {
+  display: none;
+}
+
 .visited-program {
   opacity: 0.6;
   a {

assets/css/custom/medialib.scss

@@ -1,5 +1,6 @@
 @import '../../../public/bootstrap_vendor/scss/functions';
 @import "../base/variables";
+@import "../base/mixins";
 @import "../base/elements";
 @import '../../../public/bootstrap_vendor/scss/variables';
 @import '../../../public/bootstrap_vendor/scss/mixins';
@@ -55,10 +56,12 @@ $border-spacing: 8px;
       transition: border 0.5s;
       border: 2px solid transparent;
       border-radius: 5px;
+      position: relative;
 
       &:hover
       {
         border-color: $primary;
+        text-decoration: none;
       }
 
       > img
@@ -67,9 +70,63 @@ $border-spacing: 8px;
         max-height: $tile-size - $border-spacing;
       }
 
-      .fas, .far
+      i.fas, i.far
       {
         font-size: $tile-size - 15px;
+        opacity: 0.13;
+      }
+
+      &.flavored
+      {
+        order: -1;
+      }
+
+      .name {
+        color: $primary;
+        font-size: 1.15rem;
+        text-align: center;
+        @include force-word-break();
+        padding: 1px 4px;
+        z-index: 1;
+        max-height: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        -ms-text-overflow: ellipsis;
+        text-overflow: ellipsis;
+      }
+
+      &:not(.showName) .name
+      {
+        display: none;
+      }
+
+      &.showName
+      {
+        display: grid;
+        .name, i.fas, i.far
+        {
+          grid-column: 1;
+          grid-row: 1;
+          justify-self: center;
+        }
+      }
+
+      &[data-filetype="audio"] .name {
+        margin-bottom: 1.5rem;
+        max-height: calc(100% - 1.5rem);
+      }
+
+      .audio-control {
+        position: absolute;
+        bottom: 5px;
+        right: 5px;
+        transition: font-size 0.1s;
+        font-size: 1.5rem;
+        z-index: 2;
+
+        &:hover {
+          font-size: 1.65rem;
+        }
       }
     }
   }
@@ -88,7 +145,7 @@ $border-spacing: 8px;
       max-height: $tile-size-md-smup - $border-spacing;
     }
 
-    .fas, .far
+    i.fas, i.far
     {
       font-size: $tile-size-md-smup - 15px;
     }
@@ -108,7 +165,7 @@ $border-spacing: 8px;
       max-height: $tile-size-sm - $border-spacing;
     }
 
-    .fas, .far
+    i.fas, i.far
     {
       font-size: $tile-size-sm - 15px;
     }
@@ -128,7 +185,7 @@ $border-spacing: 8px;
       max-height: $tile-size-lg - $border-spacing;
     }
 
-    .fas, .far
+    i.fas, i.far
     {
       font-size: $tile-size-lg - 15px;
     }

assets/css/custom/notifications.scss

@@ -1,6 +1,11 @@
-@import '../base/_variables';
+@import '../base/variables';
+@import '../base/mixins';
 @import 'theme_settings';
 
+h1 {
+  text-align: center;
+}
+
 .notification-container {
   border-color: $primary;
 }
@@ -23,8 +28,7 @@
 
 .notification-body {
   width: auto;
-  word-wrap: break-word;
-  word-break: break-all;
+  @include force-word-break();
 
   @media screen and (min-width: 1600px)
   {