eessppeelllloo/mapknitter
1
0
Fork 0
mirror of https://github.com/publiclab/mapknitter.git synced 2025-12-05 16:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Gallery card Enhancement

Browse Source
This commit is contained in:
Aayushi Singh
2022-05-27 16:39:02 +05:30
committed by GitHub
parent 497d5e3c47
commit 3536200738
10 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/stylesheets/maps.scss
View File

@@ -210,6 +210,19 @@ table .btn {
margin-bottom:3px; margin-bottom:3px;
} }
.card-img-centre{
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
margin-left: auto;
margin-right: auto;
}
.card-content{
flex: 1 1 auto;
min-height: 1px;
padding: 1.25rem;
text-align: center;
}
@media (max-width: 400px) { @media (max-width: 400px) {
.sidebar { .sidebar {
width: 100%; width: 100%;

5
app/assets/stylesheets/style.scss
View File

@@ -343,7 +343,10 @@ label small {
padding-top: 2.5%; padding-top: 2.5%;
text-align: center; text-align: center;
} }
.mb{
display: flex;
flex-direction: column;
}
.text-anonymous { .text-anonymous {
text-align: left; text-align: left;
margin: 20px; margin: 20px;

4
app/views/front_ui/_featured_mappers.html.erb
View File

@@ -2,8 +2,8 @@
<% mappers.each do |user| %> <% mappers.each do |user| %>
<div class="card-deck map col-md-6 col-lg-3 col-xs-12 mb-2 ml-2"> <div class="card-deck map col-md-6 col-lg-3 col-xs-12 mb-2 ml-2">
<div class="bg-transparent card card-without-border"> <div class="bg-transparent card card-without-border">
<%= image_tag(profile_image(user), class: "img-icon card-img-top mx-auto") %> <%= image_tag(profile_image(user), class: "img-icon card-img-centre mx-auto") %>
<div class="card-body text-center" style="margin-left: -18px !important;"> <div class="card-content text-center" style="margin-left: -18px !important;">
<h5 class="card-title"><a href="/profile/<%= user.login %>">@<%= user.login %></a></h5> <h5 class="card-title"><a href="/profile/<%= user.login %>">@<%= user.login %></a></h5>
<p class="card-text text-muted"> <%= user.maps.count %> maps <p class="card-text text-muted"> <%= user.maps.count %> maps
near <%= user.maps.first.location %> near <%= user.maps.first.location %>

15
app/views/front_ui/_maps.html.erb
View File

@@ -12,12 +12,12 @@
<div class="card bg-transparent card-without-border "> <div class="card bg-transparent card-without-border ">
<a href="/maps/<%= map.slug %>"> <a href="/maps/<%= map.slug %>">
<% if warp.present? %> <% if warp.present? %>
<img class="card-img" src="<%= warp.image.url %>" alt="<%= map.name %>"> <img class="card-img-centre map-img" src="<%= warp.image.url %>" alt="<%= map.name %>">
<% else %> <% else %>
<img class="card-img" src="<%= asset_path('image.png') %>" alt="Map without image" ></img> <img class="card-img-centre" src="<%= asset_path('image.png') %>" alt="Map without image" style="max-height: 400px !important;" />
<% end %> <% end %>
</a> </a>
<div class="card-body" style="margin-left: -18px !important;"> <div class="card-content" style="margin-left: -18px !important;">
<span class="mx-auto map-location"><%= truncate(map.location, :length => 32, separator: ' ') %></span> <span class="mx-auto map-location"><%= truncate(map.location, :length => 32, separator: ' ') %></span>
<h4><a href="/maps/<%= map.slug %>" class="map-title"><%= map.name %></a></h4> <h4><a href="/maps/<%= map.slug %>" class="map-title"><%= map.name %></a></h4>
<p class="map-details" id="map-title"> <p class="map-details" id="map-title">
@@ -27,12 +27,11 @@
By anonymous By anonymous
<% end %> <% end %>
</p> </p>
<div class="row mb-2"> <div class="row mb">
<div class="col-4 image map-details" style="margin-top: 9px !important;"> <div class="col map-details" style="margin-top: 9px !important;">
<i class="far fa-image"></i> <%= pluralize(map.warpables.length,"Image") %> <i class="far fa-image"></i> <%= pluralize(map.warpables.length, "image") %>
</div> </div>
<div class="col-8 map-details" style="margin-top: 8px !important;"> <div class="col map-details" style="margin-top: 8px !important;">
<i class="far fa-comment"></i> <%= pluralize(map.comments.length, "comment") %> <i class="far fa-comment"></i> <%= pluralize(map.comments.length, "comment") %>
<% if logged_in? && current_user.can_delete?(map) %> <% if logged_in? && current_user.can_delete?(map) %>
<a href="/maps/archive/<%= map.slug %>"><i class="fa fa-ban"></i></a> <a href="/maps/archive/<%= map.slug %>"><i class="fa fa-ban"></i></a>

2
app/views/front_ui/about.html.erb
View File

@@ -3,7 +3,7 @@
<img src="<%= asset_path('image.png') %>" id="about-img" alt="Aerial mapping tools"> <img src="<%= asset_path('image.png') %>" id="about-img" alt="Aerial mapping tools">
</div> </div>
<div class="row no-gutters text-block"> <div class="row no-gutters text-block">
<div class="card-body"> <div class="card-content">
<h3 class="card-title text-center">About MapKnitter</h3> <h3 class="card-title text-center">About MapKnitter</h3>
<hr> <hr>
<br> <br>

12
app/views/front_ui/all_maps.html.erb
View File

@@ -4,12 +4,12 @@
<div class="card card-without-border"> <div class="card card-without-border">
<a href="/maps/<%= map.slug %>"> <a href="/maps/<%= map.slug %>">
<% if map.warpables.length > 0 %> <% if map.warpables.length > 0 %>
<img class="card-img-top map-img" src="<%= map.warpables.first.image.url(:small) %>" alt="<%= map.name %>"> <img class="card-img-centre map-img" src="<%= map.warpables.first.image.url(:small) %>" alt="<%= map.name %>">
<% else %> <% else %>
<img class="card-img-top" src="<%= asset_path('image.png') %>" alt="Map without image" style="max-height: 400px !important;"> <img class="card-img-centre" src="<%= asset_path('image.png') %>" alt="Map without image" style="max-height: 400px !important;">
<% end %> <% end %>
</a> </a>
<div class="card-body" style="margin-left: -18px !important;"> <div class="card-content" style="margin-left: -18px !important;">
<span class="mx-auto map-location"><%= truncate(map.location, :length => 32, separator: ' ') %></span> <span class="mx-auto map-location"><%= truncate(map.location, :length => 32, separator: ' ') %></span>
<h4><a href="/maps/<%= map.slug %>" class="map-title"><%= map.name %></a></h4> <h4><a href="/maps/<%= map.slug %>" class="map-title"><%= map.name %></a></h4>
<p class="map-details"> <p class="map-details">
@@ -19,9 +19,9 @@
by anonymous by anonymous
<% end %> <% end %>
</p> </p>
<div class="row mb-2"> <div class="row">
<div class="col-4 map-details" style="margin-top: 9px !important;"><i class="far fa-image"> <%= pluralize(map.warpables.length, "image") %></i></div> <div class="col map-details" style="margin-top: 9px !important;"><i class="far fa-image"> <%= pluralize(map.warpables.length, "image") %></i></div>
<div class="col-8 map-details" style="margin-top: 8px !important;"><i class="far fa-comment"> <%= pluralize(map.comments.length, "comment") %> </i></div> <div class="col map-details" style="margin-top: 8px !important;"><i class="far fa-comment"> <%= pluralize(map.comments.length, "comment") %> </i></div>
</div> </div>
</div> </div>
</div> </div>

16
app/views/front_ui/index.html.erb
View File

@@ -94,16 +94,16 @@
<!-- mapping kites --> <!-- mapping kites -->
<div class="card-deck mb-6 text-center mx-auto" id="mapping-kits"> <div class="card-deck mb-6 text-center mx-auto" id="mapping-kits">
<div class="card mapping-kits"> <div class="card mapping-kits">
<img class="card-img-top img-draw mx-auto" src="<%= asset_path('balloon.png') %>" alt="Card image cap"> <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('balloon.png') %>" alt="Card image cap">
<div class="card-body"> <div class="card-content">
<h5 class="card-title">Balloon mapping</h5> <h5 class="card-title">Balloon mapping</h5>
<p class="card-text item-description">Reliable, ~1000-3000 ft high and great for groups and workshops.</p> <p class="card-text item-description">Reliable, ~1000-3000 ft high and great for groups and workshops.</p>
<a href="//store.publiclab.org/collections/mapping-kits/products/balloon-mapping-kit?variant=7028822724" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a> <a href="//store.publiclab.org/collections/mapping-kits/products/balloon-mapping-kit?variant=7028822724" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a>
</div> </div>
</div> </div>
<div class="card mapping-kits"> <div class="card mapping-kits">
<img class="card-img-top img-draw mx-auto" src="<%= asset_path('kite1.png') %>" alt="Card image cap"> <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('kite1.png') %>" alt="Card image cap">
<div class="card-body"> <div class="card-content">
<h5 class="card-title">Kites</h5> <h5 class="card-title">Kites</h5>
<p class="card-text item-description">Cheap, ~500-1500 ft high and very portable, great for kids.</p> <p class="card-text item-description">Cheap, ~500-1500 ft high and very portable, great for kids.</p>
<a href="//store.publiclab.org/collections/education/products/kite-mapping-pack?variant=10531821124" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a> <a href="//store.publiclab.org/collections/education/products/kite-mapping-pack?variant=10531821124" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a>
@@ -115,16 +115,16 @@
<div class="mapping-kits card-deck mb-6 text-center mx-auto"> <div class="mapping-kits card-deck mb-6 text-center mx-auto">
<div class="card mapping-kits"> <div class="card mapping-kits">
<img class="card-img-top img-draw mx-auto" src="<%= asset_path('camera.png') %>" alt="Card image cap"> <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('camera.png') %>" alt="Card image cap">
<div class="card-body"> <div class="card-content">
<h5 class="card-title">Raspberry Pi Camera</h5> <h5 class="card-title">Raspberry Pi Camera</h5>
<p class="card-text item-description"> Lightweight battery pack, easy to use, connects to to your laptop/phone,<br> great for streaming video, photos, and motion triggered capture</p> <p class="card-text item-description"> Lightweight battery pack, easy to use, connects to to your laptop/phone,<br> great for streaming video, photos, and motion triggered capture</p>
<a href="https://store.publiclab.org/collections/mapping-kits/products/waterproof-mini-camera" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a> <a href="https://store.publiclab.org/collections/mapping-kits/products/waterproof-mini-camera" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a>
</div> </div>
</div> </div>
<div class="card mapping-kits"> <div class="card mapping-kits">
<img class="card-img-top img-draw mx-auto" src="<%= asset_path('selfie.png') %>" alt="Card image cap"> <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('selfie.png') %>" alt="Card image cap">
<div class="card-body"> <div class="card-content">
<h5 class="card-title">Pole mapping</h5> <h5 class="card-title">Pole mapping</h5>
<p class="card-text item-description">Cheap, ~10-40 ft high, good for gardens + yards, versatile.</p> <p class="card-text item-description">Cheap, ~10-40 ft high, good for gardens + yards, versatile.</p>
<a href="//store.publiclab.org/collections/mapping-kits/products/pole-mapping-kit?variant=1259641040" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a> <a href="//store.publiclab.org/collections/mapping-kits/products/pole-mapping-kit?variant=1259641040" class="btn btn-lg btn-outline-secondary" target="_blank">Build or get a kit <i class="fa fa-angle-double-right"></i></a>

8
app/views/maps/show.html.erb
View File

@@ -64,8 +64,8 @@
<div class="container"> <div class="container">
<div class="card-deck mb-6 text-center mx-auto"> <div class="card-deck mb-6 text-center mx-auto">
<div class="card mapping-kits"> <div class="card mapping-kits">
<img class="card-img-top img-draw mx-auto" src="<%= asset_path('balloon1.png') %>" alt="balloon icon"> <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('balloon1.png') %>" alt="balloon icon">
<div class="card-body"> <div class="card-content">
<h3>Make your own map </h3> <h3>Make your own map </h3>
<p class="card-text item-description"> <p class="card-text item-description">
Use a kite, balloon, pole or drone to take an aerial photo and tell your own visual story of the place Use a kite, balloon, pole or drone to take an aerial photo and tell your own visual story of the place
@@ -81,8 +81,8 @@
</div> </div>
</div> </div>
<div class="card mapping-kits"> <div class="card mapping-kits">
<img class="card-img-top img-draw mx-auto" src="<%= asset_path('quiz.png') %>" alt="questions"> <img class="card-img-centre img-draw mx-auto" src="<%= asset_path('quiz.png') %>" alt="questions">
<div class="card-body"> <div class="card-content">
<h3>Ask a question</h3> <h3>Ask a question</h3>
<p class="card-text item-description"> <p class="card-text item-description">
<a href="https://publiclab.org/questions" target="blank">Search </a>through questions or Ask a question to get help from others and share ideas with the PublicLab Community <a href="https://publiclab.org/questions" target="blank">Search </a>through questions or Ask a question to get help from others and share ideas with the PublicLab Community

BIN
chromedriver_linux64.zip Normal file
View File

Binary file not shown.

BIN
google-chrome.deb Normal file
View File

Binary file not shown.