Skip to content

Commit

Permalink
Apply the new branding to the feed home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xpirix
Xpirix committed Jan 9, 2025
1 parent 581dde5 commit 049383d
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 62 deletions.
20 changes: 20 additions & 0 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,26 @@ dev-dbseed:
@echo "------------------------------------------------------------------"
@docker compose -f docker-compose.dev.yml exec $(CONTAINER_NAME) python qgisfeedproject/manage.py loaddata qgisfeedproject/qgisfeed/fixtures/*.json


dev-dbrestore:
@echo
@echo "------------------------------------------------------------------"
@echo "Restore dump from /backups/latest-qgisfeed.dmp and /backups/latest-metabase.dmp in production mode"
@echo "------------------------------------------------------------------"
@echo "stopping qgisfeed container"
@docker compose -f docker-compose.dev.yml stop qgisfeed
@echo "Dropping the gis and metabase databases"
-@docker compose -f docker-compose.dev.yml exec postgis su - postgres -c "dropdb --force qgisfeed"
-@docker compose -f docker-compose.dev.yml exec postgis su - postgres -c "dropdb --force metabase"
@echo "Creating the qgisfeed and metabase databases"
-@docker compose -f docker-compose.dev.yml exec postgis su - postgres -c "createdb -O docker -T template1 qgisfeed"
-@docker compose -f docker-compose.dev.yml exec postgis su - postgres -c "createdb -O docker -T template1 metabase"
@echo "Restore database from backups/latest-qgisfeed.dmp and backups/latest-metabase.dmp"
@docker compose -f docker-compose.dev.yml exec postgis su - postgres -c "pg_restore -c /backups/latest-qgisfeed.dmp -d qgisfeed"
@docker compose -f docker-compose.dev.yml exec postgis su - postgres -c "pg_restore -c /backups/latest-metabase.dmp -d metabase"
@echo "Starting qgisfeed container"
@docker compose -f docker-compose.dev.yml up qgisfeed

dev-createsuperuser:
@echo
@echo "------------------------------------------------------------------"
Expand Down
6 changes: 5 additions & 1 deletion docker-compose.dev.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ services:
environment:
POSTGRES_USER: docker
POSTGRES_PASS: docker
POSTGRES_DBNAME: qgisfeed
POSTGRES_DBNAME: qgisfeed
volumes:
- ${QGISFEED_DOCKER_SHARED_VOLUME}:/var/lib/postgresql
- ${QGISFEED_BACKUP_VOLUME}:/backups
# ports:
# - "5436:5432"

Expand Down Expand Up @@ -41,6 +44,7 @@ services:
- postgis
volumes:
- ../qgis-feed:/code
- /Users/xpirix/Work/Dev/01-Kartoza/00-Data/feed.qgis.org/media:/code/qgisfeedproject/media
- ./REQUIREMENTS.txt:/REQUIREMENTS.txt

webpack:
Expand Down
29 changes: 27 additions & 2 deletions qgisfeedproject/static/style/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,16 @@ mark {
}


.content p {
color: $text-primary2;
.content {
p {
color: $text-primary2;
}
h3 {
font-weight: 400;
}
}


.box-content {
background: $white;
border-radius: 10px;
Expand Down Expand Up @@ -280,4 +286,23 @@ p {
.dj_map_wrapper {
width: 100%;
}
}

.external-link {
padding-right: 20px;
&:after {
position: absolute;
width: 16px;
content: "";
margin-top: 5px;
margin-left: 3px;
height: 16px;
z-index: 1;
mask: url("../../images/external.svg");
background-color: #7fa3b9;
}
}

.rounded .rich-right img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
129 changes: 70 additions & 59 deletions qgisfeedproject/templates/feeds/feed_home_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,10 @@
<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<style>
.box-container {
max-width: 1200px;
}

.hoverable-preview:hover {
cursor: pointer;
background: #d4d4d4 !important;
background:rgb(237, 237, 237) !important;
}

#tab-content div.is-active {
Expand All @@ -33,69 +30,83 @@
{% block content %}

<div>
<div class="tabs is-centered" id="tabs">
<ul>
<li>
<a class="is-active" data-tab="1">
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Preview</span>
<h2>QGIS News Feed</h2>
<p>You can also access the QGIS News Feed in <a href="/?json=1" target="_blank" rel="noopener" class="external-link">JSON</a> format.</p>
{% if data|length > 0 %}
{% for feed in data %}
<div class="container rich has-right rounded" {% if feed.url %}ondblclick="window.open('{{ feed.url }}', '_blank');"{% endif %}>
<div class="cont coloring-1">
<h3 name="titlePreview">
{{feed.title | default:""}}
</h5>
<div name="contentPreview">
{{feed.content | default:"" | safe }}
</div>
<div class="is-flex is-justify-content-flex-end mt-3" style="gap: 10px;">
{% if feed.url %}
<a class="button is-primary1 mb-3" href="{{ feed.url }}" target="_blank">
<span class="icon"><i class="fa fa-arrow-up-right-from-square"></i></span>
<span>Open the URL</span>
</a>
</li>
<li>
<a data-tab="2">
<span class="icon is-small"><i class="fa fa-code"></i></span>
<span>Raw</span>
{% endif %}
<a class="button is-primary1 is-outlined mb-3" href="{% url 'feed_detail' feed.pk %}">
<span class="icon"><i class="fa fa-info-circle"></i></span>
<span>More details</span>
</a>
</li>
</ul>
</div>
<div id="tab-content">
<div class="tab-content-element is-active" style="padding:0 10px;" data-content="1">
{% if data|length > 0 %}
{% for feed in data %}
<div class="box-container form-preview columns has-background-light p-2 mt-5 {% if feed.url %}hoverable-preview{% endif %}"
{% if feed.url %}ondblclick="window.open('{{ feed.url }}', '_blank');"{% endif %} style="margin-left: auto;margin-right: auto;">
<div class="column is-4 is-flex is-flex-direction-column is-align-items-center"
name="imagePreview">
{% if feed.image %}
<img src="{{ feed.image }}" style="border-radius:20px;">
{% endif %}
</div>
<div class="column is-8 is-flex is-flex-direction-column is-justify-content-space-between">
<h5 name="titlePreview" class="title is-5">
{{feed.title | default:""}}
</h5>
<div name="contentPreview">
{{feed.content | default:"" | safe }}
</div>
<div class="is-flex is-justify-content-flex-end mt-3" style="gap: 10px;">
{% if feed.url %}
<a class="button" href="{{ feed.url }}" target="_blank">
<span class="icon"><i class="fa fa-arrow-up-right-from-square"></i></span>
<span>Open the URL</span>
</a>
{% endif %}
<a class="button" href="{% url 'feed_detail' feed.pk %}">
<span class="icon"><i class="fa fa-info-circle"></i></span>
<span>More details</span>
</a>
</div>

</div>
</div>
{% endfor %}
{% else %}
<div style="width: 100%; text-align: center;" class="m-5">
No data found

</div>

<div class="rich-right"
name="imagePreview">
{% if feed.image %}
<div class="title">
<a class="rich-list has-image mr-2 mb-2" {% if feed.url %}href="{{ feed.url }}" target="_blank"{% endif %}>
<div class="image">
<img src="{{ feed.image }}" style="border-radius:20px;">
</div>
</a>
</div>
{% endif %}
</div>
<div class="tab-content-element is-inactive" data-content="2">
<pre style="background-color:unset; padding:0;">
<code class="language-json">{{data_json}}</code>
</pre>

</div>
{% comment %} <div class="box-container form-preview columns p-2 mt-5 {% if feed.url %}hoverable-preview{% endif %}"
{% if feed.url %}ondblclick="window.open('{{ feed.url }}', '_blank');"{% endif %} style="margin-left: auto;margin-right: auto;">
<div class="column is-4 is-flex is-flex-direction-column is-align-items-center"
name="imagePreview">
{% if feed.image %}
<img src="{{ feed.image }}" style="border-radius:20px;">
{% endif %}
</div>
<div class="column is-8 is-flex is-flex-direction-column is-justify-content-space-between">
<h3 name="titlePreview">
{{feed.title | default:""}}
</h5>
<div name="contentPreview">
{{feed.content | default:"" | safe }}
</div>
<div class="is-flex is-justify-content-flex-end mt-3" style="gap: 10px;">
{% if feed.url %}
<a class="button is-primary1 mb-3" href="{{ feed.url }}" target="_blank">
<span class="icon"><i class="fa fa-arrow-up-right-from-square"></i></span>
<span>Open the URL</span>
</a>
{% endif %}
<a class="button is-primary1 is-outlined mb-3" href="{% url 'feed_detail' feed.pk %}">
<span class="icon"><i class="fa fa-info-circle"></i></span>
<span>More details</span>
</a>
</div>

</div>
</div> {% endcomment %}
{% endfor %}
{% else %}
<div style="width: 100%; text-align: center;" class="m-5">
No data found
</div>
{% endif %}
</div>
{% endblock content %}

Expand Down

0 comments on commit 049383d

Please sign in to comment.