fix announcement - refs #2681

assets/css/scss/_announcement.scss

@@ -0,0 +1,69 @@
+.carousel{
+  .carousel-control-prev,
+  .carousel-control-next{
+    width: 3%;
+  }
+  .carousel-indicators{
+    margin-bottom: 0;
+    bottom: -35px;
+    li{
+      height: 8px;
+    }
+  }
+  .carousel-item{
+    img{
+      padding-bottom: 1rem;
+      padding-right: 1rem;
+    }
+    .announcement-text{
+      color: #ffffff;
+      text-align: left;
+      padding-top: 12%;
+      padding-left: 15%;
+      @include portrait($breakpoint-sm, $breakpoint-md){
+        padding-top: 12%;
+        padding-left: 15%;
+      }
+      @include landscape($breakpoint-sm) {
+        padding-top: 0;
+        padding-left: 0;
+        padding-bottom: 2rem;
+      }
+      h1{
+        font-size: 40px;
+        color: #ffffff;
+        line-height: 45px;
+        text-align: left;
+      }
+      h5{
+        font-size: 20px;
+        color: #ffda29;
+        line-height: 30px;
+        text-align: left;
+      }
+    }
+  }
+}
+.announcement-image{
+
+  .dotted-bg-block{
+    height: 200px;
+    top: auto;
+    left: 130px;
+    bottom: -30px;
+    right: -30px;
+    width: auto;
+    position: absolute;
+    z-index: 0;
+    overflow: hidden;
+    div{
+      background: repeating-linear-gradient(90deg,#ffffff00,#ffffff00 7px,#00000000 7px,#e4e4e4 9px);
+      transform: rotate(45deg);
+      position: absolute;
+      top: -2000px;
+      left: -2000px;
+      right: -2000px;
+      bottom: -2000px;
+    }
+  }
+}

assets/css/scss/index.scss

@@ -5,5 +5,6 @@
 @import 'login';
 @import 'install';
 @import 'base';
+@import 'announcement';
 /*
 @import "spinner";*/

main/admin/course_list.php

@@ -577,4 +577,4 @@ $tpl = new Template($tool_name);
 $tpl->assign('actions', $actions);
 $tpl->assign('message', $message);
 $tpl->assign('content', $content);
-$tpl->display_table_template();
+$tpl->display_one_col_template();

main/admin/system_announcements.php

@@ -172,8 +172,11 @@ if ($action_todo) {
     try {
         $form->addFile(
             'picture',
-            get_lang('Add Picture'),
-            ['id' => 'picture', 'class' => 'picture-form', 'crop_image' => true, 'crop_ratio' => 'NaN']
+            [
+                get_lang('Add Picture'),
+                get_lang('The image must have a maximum dimension of 950 x 712 pixelss')
+            ],
+            ['id' => 'picture', 'class' => 'picture-form', 'crop_image' => true, 'crop_ratio' => '4/3']
         );
 
         $allowed_picture_types = api_get_supported_image_extensions(false);

src/ThemeBundle/Resources/views/News/slider.html.twig

@@ -13,18 +13,33 @@
         <div class="carousel-inner">
             {% for announcement in announcements %}
                 <div class="carousel-item {% if loop.index0 == 0 %} active {% endif %}">
-                    <img src="{{ announcement.picture }}" class="d-block w-100" alt="...">
-                    <div class="carousel-caption d-none d-md-block">
-                        <h5>{{ announcement.title }}</h5>
-                        {% if announcement.readMore %}
-                            <div class="block-text">
-                                {{ announcement.content }}
-                                <a href="{{ _p.web }}news_list.php?id={{ announcement.id }}">{{ "More" | trans }}</a>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="announcement-text">
+                                <div class="d-md-block">
+                                    <h5>{{ announcement.title }}</h5>
+                                    {% if announcement.readMore %}
+                                        <div class="block-text">
+                                            {{ announcement.content }}
+                                            <a href="{{ _p.web }}news_list.php?id={{ announcement.id }}">{{ "More" | trans }}</a>
+                                        </div>
+                                    {% else %}
+                                        {{ announcement.content }}
+                                    {% endif %}
+                                </div>
                             </div>
-                        {% else %}
-                            {{ announcement.content }}
-                        {% endif %}
+                        </div>
+                        <div class="col-md-6">
+                            <div class="announcement-image">
+                                <img src="{{ announcement.picture }}" class="d-block" alt="...">
+                                <div class="dotted-bg-block lines">
+                                    <div></div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+
+
                 </div>
             {% endfor %}
         </div>