Skip to content

Commit

Permalink
Merge pull request #114 from motohiro-mm/feature/add_css
Browse files Browse the repository at this point in the history 
CSSを追加した（初回）
  • Loading branch information
@motohiro-mm
motohiro-mm authored Oct 10, 2024
2 parents 26cfa9b + d3e67c9 commit 9c3507c
Show file tree
Hide file tree
Showing 37 changed files with 746 additions and 409 deletions.
2 changes: 1 addition & 1 deletion .rubocop.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@ RSpec/MultipleExpectations:
Enabled: false

Layout/LineLength:
Max: 150
Max: 200
203 changes: 197 additions & 6 deletions app/assets/stylesheets/application.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,205 @@
*= require_self
*/

.icon{
input:-webkit-autofill {
background-color: transparent !important;
color: inherit !important;
box-shadow: 0 0 0px 1000px white inset !important;
}

input:-webkit-autofill:focus {
background-color: white !important;
}

.icon {
width: 30px;
height: 30px;
}
.login-button {
margin-left: 1rem;
background-color: #6b7280;

.remark_button {
border-radius: 9999px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-weight: 700;
background-color: rgba(255, 237, 213, 0.7);
}


.plus_icon {
display: inline-block;
color: #ff9142;
font-size: 1.0rem;
font-weight: bold;
width: 2.0rem;
height: 2.0rem;
padding: 0.5rem;
border: 0.15rem dashed;
border-color: #ff9142;
position: relative;
border-radius: 9999px;
z-index: 10;
}

.plus_icon::before {
content: '';
position: absolute;
background: #ff9142;
width: 1.0rem;
height: 0.15rem;
border-radius: 0.25rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.plus_icon::after {
content: '';
position: absolute;
background: #ff9142;
width: 0.15rem;
height: 1.0rem;
border-radius: 0.15rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.arrow_left {
display: inline-block;
width: 2.0rem;
height: 2.0rem;
padding: 0.5rem;
position: relative;
z-index: 10;
}

.arrow_left::before {
content: '';
position: absolute;
width: 0.7rem;
height: 0.7rem;
border-top: 0.2rem solid rgb(67 20 7);
border-right: 0.2rem solid rgb(67 20 7);
border-radius: 0.1rem;
right: 0.5rem;
top: 50%;
transform: translateY(-50%) rotate(225deg);
cursor: pointer;
}

.arrow_right {
display: inline-block;
width: 2.0rem;
height: 2.0rem;
padding: 0.5rem;
position: relative;
z-index: 10;
}

.arrow_right::before {
content: '';
position: absolute;
width: 0.7rem;
height: 0.7rem;
border-top: 0.2rem solid rgb(67 20 7);
border-right: 0.2rem solid rgb(67 20 7);
border-radius: 0.1rem;
left: 0.5rem;
top: 50%;
transform: translateY(-50%) rotate(45deg);
cursor: pointer;
}

.right_caret {
display: inline-block;
vertical-align: middle;
line-height: 1;
position: relative;
width: 2.0rem;
height: 2.0rem;
border-radius: 50%;
box-sizing: content-box;
}

.right_caret::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 0.36em 0.62354em;
border-left-color: rgb(67 20 7);
border-right: 0;
transform: translateX(15%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

.box{
border: 0.2rem double rgb(67 20 7);
border-radius: 12px;
position: relative;
margin-top: 1em;
}
.box h2{
text-align: left;
position: absolute;
right: 0;
left: 1rem;
top: -1rem;
}
.box span{
padding: 1rem;
background: #FFF;
color: rgb(67 20 7);
}
.box .inner{
padding: 1.2em .5em .5em;
}

.checkbox-3 {
border: none;
}

.checkbox-3 label {
align-items: center;
padding: 0.75rem;
border: 0.1rem dashed #ff9142;
border-radius: 1.8rem;
cursor: pointer;
}


.checkbox-3 input {
display: none;
}

.checkbox-3 input[type='radio']:checked + label {
background-color: #ff9142;
color: #fff;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
}

.hidden_radio {
display: none;
}

.icon_option {
cursor: pointer;
}

.icon_image {
display: inline-block;
width: 5rem;
height: 5rem;
padding: 0.2rem;
border: 4px solid transparent;
}

.icon_option input:checked + .icon_image {
border-radius: 100%;
border-color: #ff9142;
}
2 changes: 1 addition & 1 deletion app/controllers/meeting_rooms_controller.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
class MeetingRoomsController < ApplicationController
def show
@meeting_room = current_user.family.meeting_rooms.find(params[:id])
@remarks = @meeting_room.remarks
@remarks = @meeting_room.remarks.order(created_at: :desc)
end

def create
Expand Down
4 changes: 4 additions & 0 deletions app/helpers/application_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,8 @@ module ApplicationHelper
def css_class_day(day)
day.strftime('date%Y%m%d')
end

def format_line_break(text)
safe_join(text.split("\n"), tag.br)
end
end
3 changes: 0 additions & 3 deletions app/helpers/meals_helper.rb
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
# frozen_string_literal: true

module MealsHelper
def format_memo(meal)
safe_join(meal.memo.split("\n"), tag.br)
end
end
1 change: 1 addition & 0 deletions app/javascript/application.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "fontawesome";
import "@hotwired/turbo-rails";
import "controllers";
35 changes: 22 additions & 13 deletions app/views/families/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,32 @@
<div>
<h1 class="font-bold text-4xl">献立表の共有</h1>
<div class="mx-auto p-4 w-full">
<div class="flex justify-between items-center">
<h1 class="font-bold text-2xl">献立表を共有する</h1>
<%= link_to meal_plans_path, class: 'inline-block flex items-center' do %>
<i class="fa-regular fa-rectangle-list text-xl"></i>
<span class="ml-2 text-md">献立表へ</span>
<% end %>
</div>

<div class="border border-stone-300 rounded-md p-4 my-5 text-stone-800">
<strong class="block font-bold text-lg">共有しているユーザー</strong>
<div class="my-5">
<div class="my-8">
<div class="my-4">
以下のURLからログインすることで、この献立表に参加することができます。<br>
URLをコピーして家族を献立表に招待しましょう。
</div>
<input id="copyTarget" type="text" value="<%= @family.invitation_url(request) %>" readonly autocomplete="off" class="block rounded-md border border-red-950/20 w-full focus:ring-orange-950/50 focus:border-orange-950/50">
<div class="text-center">
<button class="rounded-full inline-block mt-4 py-3 px-4 bg-red-400 text-white" onclick="copyToClipboard()">共有URLをCopy</button>
</div>
</div>
<strong class="block font-bold text-lg">この献立表のユーザー</strong>

<% @family.users.each do |user| %>
<p class="my-5 flex items-center">
<div class="my-5 flex items-center">
<%= image_tag user.icon, class: 'icon' %>
<span class="ml-2"><%= user.name %></span>
</p>
</div>
<% end %>

<p class="my-5">
<input id="copyTarget" type="text" value="<%= @family.invitation_url(request) %>" readonly autocomplete="off">
<button class="rounded-lg py-3 px-5 bg-gray-600 text-white inline-block font-medium cursor-pointer" onclick="copyToClipboard()">共有URLをCopyする</button>
</p>
</div>
<%= link_to '献立表へ戻る', meal_plans_path,
class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block font-medium' %>

<script>
function copyToClipboard() {
Expand Down
2 changes: 1 addition & 1 deletion app/views/home/about.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div>
<div class="mx-auto p-4 w-full">
<h1>使い方</h1>
<p>
今後文章画像追加する！！！
Expand Down
87 changes: 63 additions & 24 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,69 @@
<div class="w-full">
<% if notice.present? %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
<% end %>

<div class="flex justify-between items-center">
<h1 class="font-bold text-4xl text-stone-800">ごはんサミット</h1>
<div class="mx-auto p-4 w-full text-center">
<div class="m-4">
ロゴ!おきかえる
</div>
<p>
ごはんサミットへようこそ！
</p>
<p>
ログインして家族で献立を相談しよう！
<p class="mx-4 my-8">
ごはんサミットへようこそ！<br>
ごはんサミットは、<br>
献立の相談と献立表の共有ができるアプリです。
</p>
<p>
献立表を作ろう！
</p>
<div>
<%= button_to 'Googleでログイン', google_oauth2_path, method: :post, data: { turbo: false }, class: 'login-button' %>
<div class="m-4">
<%= button_to 'Googleでログイン', google_oauth2_path, method: :post, data: { turbo: false }, class: 'rounded-full py-3 px-4 bg-red-400 inline-block text-white' %>
</div>
<div class="mb-8">
<span>
<%= link_to '利用規約', terms_path, class: 'hover:underline' %>
・
<%= link_to 'プライバシーポリシー', terms_path, class: 'hover:underline' %>
に<br>同意した上でログインしてください。
</span>
</div>
<div>
<%= link_to '利用規約', terms_path, class: 'ml-4 text-stone-800 hover:underline' %>
<%= link_to 'プライバシーポリシー', terms_path, class: 'ml-4 text-stone-800 hover:underline' %>
<div class="my-8">
<h2 class="m-4 text-xl">家族で献立を相談しよう</h2>
<div class="flex justify-between items-center m-4">
<p class="w-2/3 mr-6 text-left">
食べたいものを提案しましょう。食べたいものが決まってなくても、その日の気分や希望をコメントできます。相談して献立を決めていきましょう。
</p>
<div class="w-1/3 mx-auto">
<%#= image_tag('home/chat.png') %>
画像をはる
</div>
</div>
</div>
<div class="my-8">
<h2 class="m-4 text-xl">献立表に登録しよう</h2>
<div class="flex justify-between items-center m-4">
<p class="w-2/3 mr-6 text-left">
食べたいものが決まったら献立表に登録しましょう。会議で提案した料理をそのまま献立表に登録することができます。会議をせずに献立を登録することもできます。
</p>
<div class="w-1/3 mx-auto">
<%#= image_tag('home/chat.png') %>
画像をはる
</div>
</div>
</div>
<div class="my-8">
<h2 class="m-4 text-xl">献立表を共有しよう</h2>
<div class="flex justify-between items-center m-4">
<p class="w-2/3 mr-6 text-left">
登録した献立は一覧で見ることができます。献立表は家族で共有していつでも確認できます。
</p>
<div class="w-1/3 mx-auto">
<%#= image_tag('home/chat.png') %>
画像をはる
</div>
</div>
</div>

<div class="mt-8 m-4">
<%= button_to 'Googleでログイン', google_oauth2_path, method: :post, data: { turbo: false }, class: 'rounded-full py-3 px-4 bg-red-400 inline-block text-white' %>
</div>
<div>
<p>
ここに使い方を書く！
</p>
<div class="mb-8">
<span>
<%= link_to '利用規約', terms_path, class: 'hover:underline' %>
・
<%= link_to 'プライバシーポリシー', terms_path, class: 'hover:underline' %>
に<br>同意した上でログインしてください。
</span>
</div>
</div>
Loading

0 comments on commit 9c3507c

Please sign in to comment.