Commit f1731f38 authored by mbajur's avatar mbajur
Browse files

Merge branch '62-mobile-version' into 'master'

Resolve "Mobile version - home page"

See merge request mbajur/prismo!101
parents f4b7918d 71423981
......@@ -3,6 +3,8 @@ class ApplicationController < ActionController::Base
helper_method :current_account
before_action :detect_device_format
private
def current_account
......@@ -18,4 +20,15 @@ class ApplicationController < ActionController::Base
ids = user_signed_in? ? current_account.upvoted_stories.map(&:voteable_id) : []
@account_upvoted_story_ids = ids
end
def detect_device_format
case request.user_agent
when /iPhone/i
request.variant = :phone
when /Android/i && /mobile/i
request.variant = :phone
when /Windows Phone/i
request.variant = :phone
end
end
end
......@@ -28,5 +28,6 @@
@import './components/footer';
@import './components/toast';
@import './components/media';
@import './components/main';
@import './vendor/toastify';
.body--phone {
.main {
padding: 0;
}
}
......@@ -10,6 +10,14 @@
font-weight: 400;
}
.btn-link .fe {
// color: rgba(255, 255, 255, 0.8);
font-weight: 600;
margin-top: 4px;
display: inline-block;
font-size: 18px;
}
.btn-link {
color: rgba(255, 255, 255, .5);
......
......@@ -45,18 +45,18 @@
&-thumb {
padding-right: .5rem !important;
img {
border-radius: 3px;
}
width: 100%;
height: 110px;
display: inline-block;
background-size: cover;
border-radius: 3px;
overflow: hidden;
background-color: $gray-color-light;
background-position: 50% 50%;
}
&-thumb-empty {
background: $gray-color-light;
width: 100%;
padding-bottom: 100%;
position: relative;
border-radius: 3px;
&:before {
content: "";
......@@ -71,7 +71,7 @@
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image" color="#3a4049"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>');
}
&--text {
&--article {
&:before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-feather" color="#3a4049"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg>');
}
......@@ -157,3 +157,57 @@
}
}
}
.story-row--phone {
padding: 0.5rem;
.story-row-excerpt {
padding: 0.5rem;
margin: 0;
}
.story-row-thumb {
height: 40px;
width: 40px;
float: right;
margin-left: 0.5rem;
&-empty::before {
width: 30%;
height: 28%;
}
}
.story-row-excerpt {
padding: 0;
}
.story-row-score-btn {
padding: 0;
color: #454d5d;
&::before {
position: static;
transform: none;
display: inline-block;
margin-right: .3rem;
margin-bottom: .1rem;
}
}
.story-row-meta {
&-primary {
display: flex;
overflow-x: hidden;
.list-inline-item {
height: 20px
}
}
&-secondary {
margin-top: 0.4rem;
clear: both;
}
}
}
......@@ -6,6 +6,7 @@ import Rails from 'rails-ujs'
import errorStatusResolver from './lib/error_status_resolver'
// Load spectre.css
import 'feather-icon-font/dist/feather'
import '../css/application.scss'
// Init rails UJS
......
......@@ -28,4 +28,20 @@ class StoryPresenter
more_tags_seleciton = tags - primary_tags
more_tags_seleciton.any? ? more_tags_seleciton : []
end
def thumb_classes
classes = []
return if story.thumb.present?
classes.push('story-row-thumb-empty')
classes.push('story-row-thumb-empty--article') if story.article?
classes
end
def thumb_styles
return nil if story.thumb.blank?
"background-image: url(#{story.thumb_url(:size_200)})"
end
end
......@@ -5,6 +5,8 @@
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= render 'shared/rollbar' %>
<%= yield :head %>
......@@ -14,12 +16,12 @@
<%= render 'shared/head' %>
</head>
<body>
<body class="body--<%= request.variant.join %>">
<div data-controller="application">
<%= render 'shared/navbar' %>
<%= render 'shared/flash' %>
<div class="container">
<div class="container main">
<%= yield %>
</div>
......
header.navbar-main
.container
.navbar
section.navbar-section
.dropdown
a.btn.btn-link.dropdown-toggle(href="javascript:void(0);")
i.fe.fe-menu
ul.menu
li.menu-item
= link_to 'Stories', root_path
li.menu-item
= link_to 'Comments', comments_path
= link_to Setting.site_title, root_path, class: 'navbar-brand'
section.navbar-section
= active_link_to new_story_path, class: 'btn btn-link' do
i.fe.fe-plus-circle
- if user_signed_in?
= render 'shared/_navbar/notifications'
= render 'shared/_navbar/profile'
header.navbar-main
.container(style="width: 990px;")
.container
.navbar
section.navbar-section
= link_to Setting.site_title, root_path, class: 'navbar-brand'
......@@ -10,39 +10,7 @@ header.navbar-main
= active_link_to '+ Add story', new_story_path, class: 'btn btn-link'
- if user_signed_in?
a.btn.btn-link.navbar-main-notifications#notifications-indicator(
href=notifications_path
data-controller="notifications-indicator"
data-turbolinks-permanent=true
data-notifications-indicator-all-path=notifications_path
data-notifications-indicator-unread-path=unread_notifications_path
title="Notifications"
)
i.icon.icon-message
.dropdown.dropdown-right.navbar-main-profile
a.btn.btn-link.dropdown-toggle(href="javascript:void(0);")
= image_tag current_account.avatar_url(:size_60), class: 'avatar'
ul.menu
li.menu-item
.tile.tile-centered
.tile-icon
= image_tag current_account.avatar_url(:size_60), class: 'avatar'
.tile-content = current_account
li.divider
li.menu-item
= link_to 'My Profile', current_account.path
li.menu-item
= link_to 'Settings', settings_profile_path
- if current_user.is_admin?
li.menu-item
= link_to 'Admin', edit_admin_settings_path
li.divider
li.menu-item
= link_to 'Sign-out', destroy_user_session_path, data: { method: "delete" }
= render 'shared/_navbar/notifications'
= render 'shared/_navbar/profile'
- else
= link_to 'Join us', new_user_session_path, class: 'btn btn-link'
a.btn.btn-link.navbar-main-notifications#notifications-indicator(
href=notifications_path
data-controller="notifications-indicator"
data-turbolinks-permanent=true
data-notifications-indicator-all-path=notifications_path
data-notifications-indicator-unread-path=unread_notifications_path
title="Notifications"
)
/ i.icon.icon-message
i.fe.fe-bell
.dropdown.dropdown-right.navbar-main-profile
a.btn.btn-link.dropdown-toggle(href="javascript:void(0);")
= image_tag current_account.avatar_url(:size_60), class: 'avatar'
ul.menu
li.menu-item
.tile.tile-centered
.tile-icon
= image_tag current_account.avatar_url(:size_60), class: 'avatar'
.tile-content = current_account
li.divider
li.menu-item
= link_to 'My Profile', current_account.path
li.menu-item
= link_to 'Settings', settings_profile_path
- if current_user.is_admin?
li.menu-item
= link_to 'Admin', edit_admin_settings_path
li.divider
li.menu-item
= link_to 'Sign-out', destroy_user_session_path, data: { method: "delete" }
- presenter = StoryPresenter.new(story)
- is_upvoted = @account_upvoted_story_ids.include? story.id
- account = story.account.decorate
li.story-row.story-row--phone(data-controller="story" data-voted=is_upvoted.to_s class=('story-row--voted' if is_upvoted))
ul.story-row-meta.story-row-meta-primary.list-inline
= render 'stories/_story/meta_primary', presenter: presenter,
story: story,
account: account
a.story-row-thumb(class=presenter.thumb_classes
style=presenter.thumb_styles
href=story_path(story))
h3.story-row-title
- if story.url.present?
= link_to story.title, story.url, target: '_blank'
- else
= link_to story.title, story_path(story)
- if presenter.excerpt.present?
p.story-row-excerpt
= presenter.excerpt
ul.story-row-meta.story-row-meta-secondary.list-inline
li.list-inline-item
a.story-row-score-btn(
data-action="click->story#toggleVote"
data-target="story.voteBtn"
data-action-path=toggle_vote_api_ujs_story_path(story)
)
span.story-row-score-votes-count
= story.votes_count
li.list-inline-item
= render 'stories/_story/meta_secondary', presenter: presenter,
story: story,
account: account
......@@ -14,12 +14,10 @@ li.story-row(data-controller="story" data-voted=is_upvoted.to_s class=('story-ro
span.story-row-score-votes-count
= story.votes_count
.column.col-2.story-row-thumb
= link_to story_path(story) do
- if story.thumb.present?
= image_tag story.thumb_url(:size_200), width: '100%'
- else
.story-row-thumb-empty(class=('story-row-thumb-empty--text' if story.url.blank?))
.column.col-2
a.story-row-thumb(class=presenter.thumb_classes
style=presenter.thumb_styles
href=story_path(story))
.column
h3.story-row-title
......@@ -29,59 +27,15 @@ li.story-row(data-controller="story" data-voted=is_upvoted.to_s class=('story-ro
= link_to story.title, story_path(story)
ul.story-row-meta.list-inline
- if story.account.present?
li.list-inline-item
| @#{link_to story.account.username, account.path}
li.list-inline-item
= story.url_domain
- presenter.primary_tags.each do |tag|
li.list-inline-item
| ##{link_to tag.name, tag.path}
- if presenter.more_tags.any?
li.list-inline-item
div.popover.popover-bottom.story-row-tags-more
a + #{presenter.more_tags.size} more
.popover-container
.panel
.panel-body
ul.list-inline
- presenter.more_tags.each do |tag|
li.list-inline-item
| ##{link_to tag.name, tag.path}
= render 'stories/_story/meta_primary', presenter: presenter,
story: story,
account: account
- if presenter.excerpt.present?
p.story-row-excerpt
= presenter.excerpt
ul.story-row-meta.list-inline
li.list-inline-item
= link_to story_path(story) do
| #{story.comments_count} comments
li.list-inline-item
= link_to story_path(story) do
| Posted
span.ml-1(data-controller="time-ago" data-datetime=story.created_at.iso8601)
= story.created_at
- if user_signed_in? && more_actions_available
li.list-inline-item
li.list-inline-item
div.dropdown
a.dropdown-toggle(href="javascript:void(0);" data-turbolinks="false") More
ul.menu
- if policy(story).edit?
li.menu-item
= link_to 'Edit', edit_story_path(story)
- if policy(story).scrap?
li.menu-item
a(
href="#"
data-action="click->story#scrap"
data-action-path=scrap_api_ujs_story_path(story)
) Scrap again
= render 'stories/_story/meta_secondary', presenter: presenter,
story: story,
account: account
- if story.account.present?
li.list-inline-item
| @#{link_to story.account.username, account.path}
li.list-inline-item
= story.url_domain
= render 'stories/_story/tags', presenter: presenter
- more_actions_available = policy(story).edit? && policy(story).scrap?
li.list-inline-item
= link_to story_path(story) do
| #{story.comments_count} comments
li.list-inline-item
= link_to story_path(story) do
| Posted
span.ml-1(data-controller="time-ago" data-datetime=story.created_at.iso8601)
= story.created_at
- if user_signed_in? && more_actions_available
li.list-inline-item
li.list-inline-item
div.dropdown
a.dropdown-toggle(href="javascript:void(0);" data-turbolinks="false") More
ul.menu
- if policy(story).edit?
li.menu-item
= link_to 'Edit', edit_story_path(story)
- if policy(story).scrap?
li.menu-item
a(
href="#"
data-action="click->story#scrap"
data-action-path=scrap_api_ujs_story_path(story)
) Scrap again
- presenter.primary_tags.each do |tag|
li.list-inline-item
| ##{link_to tag.name, tag.path}
- if presenter.more_tags.any?
li.list-inline-item
div.popover.popover-bottom.story-row-tags-more
a + #{presenter.more_tags.size} more
.popover-container
.panel
.panel-body
ul.list-inline
- presenter.more_tags.each do |tag|
li.list-inline-item
| ##{link_to tag.name, tag.path}
......@@ -2467,6 +2467,10 @@ faye-websocket@~0.11.0:
dependencies:
websocket-driver ">=0.5.1"
feather-icon-font@luizbills/feather-icon-font:
version "0.0.0"
resolved "https://codeload.github.com/luizbills/feather-icon-font/tar.gz/e2ed1f919dc5cc2e80045b854abf3cdda930ddea"
file-loader@^1.1.11:
version "1.1.11"
resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment