From d575bf52bb134cd66e57a6e52215e1d4173f8ac5 Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <hey@jancborchardt.net>
Date: Fri, 9 Oct 2020 17:37:14 +0200
Subject: [PATCH] Fix design of Explore page
Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
---
css/explore.css | 109 -----------------------------
css/explore.scss | 64 +++++++++++++++++
templates/part.content.explore.php | 57 ++++-----------
3 files changed, 79 insertions(+), 151 deletions(-)
delete mode 100644 css/explore.css
create mode 100644 css/explore.scss
diff --git a/css/explore.css b/css/explore.css
deleted file mode 100644
index 8bf60a754..000000000
--- a/css/explore.css
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Nextcloud - News
- *
- * This file is licensed under the Affero General Public License version 3 or
- * later. See the COPYING file.
- *
- * @author Bernhard Posselt <dev@bernhard-posselt.com>
- * @copyright Bernhard Posselt 2014
- */
-
-/**
- * Explore styles
- */
-.explore #app-content-wrapper {
- height: 100%;
-}
-
-#explore {
- height: 100%;
- width: 100%;
- padding: 45px 0 45px 45px;
-}
-
-
-#explore .grid-item {
- float: left;
- width: 300px;
- border-collapse: collapse;
- border: 1px solid #ccc;
- margin: 0 25px 25px 0;
-}
-
-#explore h1 {
- font-size: 13pt;
- background-repeat: no-repeat;
- background-position: 0 center;
- background-size: 24px 24px;
- padding: 5px 0 0 35px;
-}
-
-#explore h1 a {
- word-wrap: break-word;
-}
-
-#explore h1 a:hover {
- text-decoration: underline;
-}
-
-#explore .category-wrapper {
- text-align: center;
-}
-
-#explore .category {
- font-weight: normal;
- font-size: 10pt;
- color: var(--color-primary-text);
- background-color: var(--color-primary);
- padding: 10px;
- font-weight: bold;
-}
-
-#explore .grid-item-content {
- padding: 30px;
-}
-
-#explore .explore-logo {
- text-align: center;
- margin-top: 25px;
-}
-
-#explore .explore-logo img {
- width: 100%;
-}
-
-#explore .explore-subscribe {
- padding-top: 15px;
- text-align: right;
-}
-
-#explore .explore-content {
- padding-top: 25px;
-}
-
-#explore .explore-filter {
- text-align: right;
- padding: 0 30px 30px;
-}
-
-#explore .explore-filter input,
-#explore .explore-filter select {
- margin-left: 10px;
- display: inline-block;
-}
-
-#explore .explore-filter input {
- width: 200px;
-}
-
-#explore .explore-footer {
- clear: both;
- margin: 75px 0;
- text-align: center;
-}
-
-#explore .explore-footer a {
- font-size: 11pt;
- color: #0000AA;
- text-decoration: underline;
-}
diff --git a/css/explore.scss b/css/explore.scss
new file mode 100644
index 000000000..d459ae825
--- /dev/null
+++ b/css/explore.scss
@@ -0,0 +1,64 @@
+/**
+ * Nextcloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright 2020, Jan C. Borchardt, https://jancborchardt.net
+ * @copyright Bernhard Posselt 2014
+ */
+
+/**
+ * Explore styles
+ */
+.explore #app-content-wrapper {
+ height: 100%;
+}
+
+#explore {
+ height: 100%;
+ width: 100%;
+ padding: 45px 0 45px 45px;
+
+ .grid-item {
+ width: 300px;
+ border: 2px solid var(--color-border);
+ border-radius: var(--border-radius-large);
+ margin: 0 24px 24px 0;
+ padding: 24px;
+
+ .explore-title {
+ background-repeat: no-repeat;
+ background-position: 0 center;
+ background-size: 24px;
+ padding-left: 32px;
+
+ a {
+ word-wrap: break-word;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .explore-logo {
+ text-align: center;
+ margin-top: 25px;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .explore-subscribe {
+ margin-top: 16px;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+}
diff --git a/templates/part.content.explore.php b/templates/part.content.explore.php
index 87a62259f..28f4e5d23 100644
--- a/templates/part.content.explore.php
+++ b/templates/part.content.explore.php
@@ -1,53 +1,26 @@
<?php print_unescaped($this->inc('part.content.warnings')) ?>
<div id="explore">
- <!--<div class="explore-filter">
- <label>
- <input ng-model="Explore.filter" type="search" placeholder="<?php p(addslashes($l->t('filter'))) ?>" news-auto-focus>
- </label>
- </div>-->
-
-
- <div class="explore-filter">
- <label for="explorelanguagecode"><?php p($l->t('Language')) ?>: </label>
- <select id="explorelanguagecode" name="explorelanguagecode"
- ng-change="Explore.showLanguage(Explore.selectedLanguageCode)"
- ng-options="language as language for language in Explore.getSupportedLanguageCodes()"
- ng-model="Explore.selectedLanguageCode"></select>
- </div>
<div class="grid">
<div ng-repeat="entry in Explore.feeds | filter:Explore.filter | orderBy:'-votes'" ng-show="!Explore.feedExists(entry.feed)" class="explore-feed grid-item" news-refresh-masonry>
- <div class="category-wrapper">
- <div class="category">
- {{ entry.category }}
- </div>
- </div>
- <div class="grid-item-content">
- <h1 ng-show="entry.favicon"
- ng-style="{ backgroundImage: 'url(' + entry.favicon + ')'}">
- <a target="_blank" rel="noreferrer" ng-href="{{ entry.url }}">{{ entry.title }}</a>
- </h1>
- <h1 ng-hide="entry.favicon" class="icon-rss">
- {{ entry.title }}
- </h1>
- <div style="clear:both"></div>
- <div class="explore-content">
- <p>{{ entry.description }}</p>
+ <h2 ng-show="entry.favicon"
+ class="explore-title"
+ ng-style="{ backgroundImage: 'url(' + entry.favicon + ')'}">
+ <a target="_blank" rel="noreferrer" ng-href="{{ entry.url }}">{{ entry.title }}</a>
+ </h2>
+ <h2 ng-hide="entry.favicon" class="icon-rss explore-title">
+ {{ entry.title }}
+ </h2>
+ <div class="explore-content">
+ <p>{{ entry.description }}</p>
- <div class="explore-logo">
- <img ng-src="{{ entry.image }}" ng-if="entry.image">
- </div>
- </div>
- <div class="explore-subscribe">
- <button ng-click="Explore.subscribeTo(entry.feed)">
- <?php p($l->t('Subscribe')) ?>
- </button>
+ <div ng-if="entry.image" class="explore-logo">
+ <img ng-src="{{ entry.image }}" >
</div>
</div>
+ <button class="explore-subscribe" ng-click="Explore.subscribeTo(entry.feed)">
+ <?php p($l->t('Subscribe to')) ?> {{ entry.title }}
+ </button>
</div>
</div>
-
- <div class="explore-footer">
- <a target="_blank" rel="noreferrer" href="https://github.com/nextcloud/news/tree/master/docs/explore"><?php p($l->t('Got more awesome feeds? Share them with us!')) ?></a>
- </div>
</div>