From 4f2b35ccb9ef992b6aec573c5d2d0a132f9e3404 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 19 Feb 2022 22:46:12 -0600 Subject: [PATCH 01/22] WIP New app layout --- app/assets/stylesheets/components/base.css | 6 +- app/assets/stylesheets/legacy/_layout.scss | 44 ++---- app/helpers/application_helper.rb | 8 + app/views/components/_header.html.erb | 5 + app/views/dashboard/index.html.erb | 117 ++++++++------- app/views/donations/index.html.erb | 83 ++++++----- app/views/invitations/index.html.erb | 113 +++++++------- app/views/layouts/application.html.erb | 73 ++++++--- app/views/security/index.html.erb | 28 ++-- app/views/shared/_header_account.html.erb | 12 +- app/views/shared/_main_nav.html.erb | 36 ++--- app/views/wallet/index.html.erb | 165 +++++++++++---------- 12 files changed, 372 insertions(+), 318 deletions(-) create mode 100644 app/views/components/_header.html.erb diff --git a/app/assets/stylesheets/components/base.css b/app/assets/stylesheets/components/base.css index bcfaea0..f022c1a 100644 --- a/app/assets/stylesheets/components/base.css +++ b/app/assets/stylesheets/components/base.css @@ -3,9 +3,9 @@ @apply leading-none } - h1, h2, h3 { - @apply font-light; - } + /* h1, h2, h3 { */ + /* @apply font-light; */ + /* } */ h1 { @apply text-3xl uppercase; diff --git a/app/assets/stylesheets/legacy/_layout.scss b/app/assets/stylesheets/legacy/_layout.scss index a9575aa..6ffed80 100644 --- a/app/assets/stylesheets/legacy/_layout.scss +++ b/app/assets/stylesheets/legacy/_layout.scss @@ -1,6 +1,22 @@ @import "variables"; @import "mediaqueries"; +body { + background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%), + url('/img/bg-1.jpg'); + background-size: cover; + background-attachment: fixed; +} + +.ks-site-icon { + svg { + display: inline-block; + height: 1.875rem; + vertical-align: top; + width: auto; + } +} + #wrapper { width: 100%; text-align: center; @@ -23,17 +39,6 @@ span.project-name { display: none; } - - span.icon { - svg { - display: inline-block; - height: 1.875rem; - vertical-align: top; - width: auto; - } - - margin-right: 0.5rem; - } } p.current-user { @@ -94,19 +99,6 @@ body#admin-panel { } main { - width: $content-width; - max-width: $content-max-width; - margin: 4rem auto 6rem auto; - text-align: left; - - @include media-max(medium) { - max-width: 90%; - } - - @include media-max(small) { - margin: 3rem auto; - } - p { line-height: 1.5rem; margin-bottom: 1rem; @@ -126,10 +118,6 @@ main { section { margin-bottom: 3rem; - - h2 { - display: none; - } } table { diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index e2ff699..255a3f2 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -2,4 +2,12 @@ module ApplicationHelper def sats_to_btc(sats) sats.to_f / 100000000 end + + def main_nav_class(current_section, link_to_section) + if current_section == link_to_section + "bg-gray-900/50 text-white px-3 py-2 rounded-md text-sm font-medium" + else + "text-gray-300 hover:bg-gray-900/30 hover:text-white px-3 py-2 rounded-md text-sm font-medium" + end + end end diff --git a/app/views/components/_header.html.erb b/app/views/components/_header.html.erb new file mode 100644 index 0000000..3e00164 --- /dev/null +++ b/app/views/components/_header.html.erb @@ -0,0 +1,5 @@ +
+
+

<%= page_title %>

+
+
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb index 1e1d321..ce5f86c 100644 --- a/app/views/dashboard/index.html.erb +++ b/app/views/dashboard/index.html.erb @@ -1,58 +1,63 @@ -
-

Services

-

- Your Kosmos account and password currently give you access to these - services: -

-
-
-

- <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %> -

-

- Chat rooms and instant messaging (XMPP/Jabber) +<%= render partial: "components/header", locals: { page_title: "Services" } %> + +

+
+
+

+ Your Kosmos account and password currently give you access to these + services:

-
-
-

- <%= link_to "Discourse", "https://community.kosmos.org", class: "ks-text-link" %> -

-

- Kosmos community forums and user support/help site -

-
-
-

- 🗲 - <%= link_to "Lightning Wallet", wallet_path, class: "ks-text-link" %> -

-

- Send and receive sats over the Bitcoin Lightning Network -

-
-
-

- <%= link_to "Wiki", "https://wiki.kosmos.org", class: "ks-text-link" %> -

-

- Kosmos documentation and knowledge base -

-
-
-

- <%= link_to "Gitea", "https://gitea.kosmos.org", class: "ks-text-link" %> -

-

- Code hosting and collaboration for software projects -

-
-
-

- <%= link_to "Drone CI", "https://drone.kosmos.org", class: "ks-text-link" %> -

-

- Continuous integration for software projects on Gitea -

-
+
+
+

+ <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %> +

+

+ Chat rooms and instant messaging (XMPP/Jabber) +

+
+
+

+ <%= link_to "Discourse", "https://community.kosmos.org", class: "ks-text-link" %> +

+

+ Kosmos community forums and user support/help site +

+
+
+

+ 🗲 + <%= link_to "Lightning Wallet", wallet_path, class: "ks-text-link" %> +

+

+ Send and receive sats over the Bitcoin Lightning Network +

+
+
+

+ <%= link_to "Wiki", "https://wiki.kosmos.org", class: "ks-text-link" %> +

+

+ Kosmos documentation and knowledge base +

+
+
+

+ <%= link_to "Gitea", "https://gitea.kosmos.org", class: "ks-text-link" %> +

+

+ Code hosting and collaboration for software projects +

+
+
+

+ <%= link_to "Drone CI", "https://drone.kosmos.org", class: "ks-text-link" %> +

+

+ Continuous integration for software projects on Gitea +

+
+
+
- + diff --git a/app/views/donations/index.html.erb b/app/views/donations/index.html.erb index d3b252b..89c2378 100644 --- a/app/views/donations/index.html.erb +++ b/app/views/donations/index.html.erb @@ -1,41 +1,46 @@ -
-

Donations

-

- Your financial contributions to the development and - upkeep of Kosmos software and services. -

-
+<%= render partial: "components/header", locals: { page_title: "Donations" } %> -
- <% if @donations.any? %> - - <% else %> -

- No donations to show. -

- <% end %> -
+ + + diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb index 68235a0..303b2bd 100644 --- a/app/views/invitations/index.html.erb +++ b/app/views/invitations/index.html.erb @@ -1,56 +1,61 @@ -
-

Invitations

- <% if @invitations_unused.any? %> -

- Invite your friends to a Kosmos account by sharing an invitation URL with them: -

- <% end %> -
+<%= render partial: "components/header", locals: { page_title: "Invitations" } %> -
- <% if @invitations_unused.any? %> - - - - - - - - <% @invitations_unused.each do |invitation| %> - - - - <% end %> - -
URL
<%= invitation_url(invitation.token) %>
- <% else %> -

- You do not have any invitations to give away yet. All good - things come in time. -

- <% end %> -
+
+
+
+ <% if @invitations_unused.any? %> +

+ Invite your friends to a Kosmos account by sharing an invitation URL with them: +

+ <% end %> +
-<% if @invitations_used.any? %> -
-

Accepted Invitations

- - - - - - - - - - <% @invitations_used.each do |invitation| %> - - - - - - <% end %> - -
IDAcceptedInvited user
<%= invitation.token %><%= invitation.used_at.strftime("%Y-%m-%d") %><%= User.find(invitation.invited_user_id).address %>
-
-<% end %> +
+ <% if @invitations_unused.any? %> + + + + + + + + <% @invitations_unused.each do |invitation| %> + + + + <% end %> + +
URL
<%= invitation_url(invitation.token) %>
+ <% else %> +

+ You do not have any invitations to give away yet. All good + things come in time. +

+ <% end %> +
+ + <% if @invitations_used.any? %> +
+

Accepted Invitations

+ + + + + + + + + + <% @invitations_used.each do |invitation| %> + + + + + + <% end %> + +
IDAcceptedInvited user
<%= invitation.token %><%= invitation.used_at.strftime("%Y-%m-%d") %><%= User.find(invitation.invited_user_id).address %>
+
+ <% end %> +
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 263de68..440ccd8 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -11,29 +11,68 @@ <%= javascript_importmap_tags %> +
+ + + <%= yield %> +
+
-
-

- <%= render partial: "shared/icons/comet" %> - Kosmos - Account -

- <%= render partial: 'shared/header_account' %> -
- - <% if user_signed_in? && current_user.confirmed? %> - <%= render partial: 'shared/main_nav' %> - <% end %> - <% flash.each do |type, msg| %>

<%= msg %>

<% end %> - -
- <%= yield %> -
diff --git a/app/views/security/index.html.erb b/app/views/security/index.html.erb index e1169b6..c9e59ed 100644 --- a/app/views/security/index.html.erb +++ b/app/views/security/index.html.erb @@ -1,12 +1,18 @@ -
-

Security

-
+<%= render partial: "components/header", locals: { page_title: "Account" } %> -
-

Password change

-

- <%= form_with(url: settings_reset_password_path, method: :post) do %> - <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %> - <% end %> -

-
+
+
+
+

Security

+
+ +
+

Password change

+

+ <%= form_with(url: settings_reset_password_path, method: :post) do %> + <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %> + <% end %> +

+
+
+
diff --git a/app/views/shared/_header_account.html.erb b/app/views/shared/_header_account.html.erb index 21497a5..a6c63e5 100644 --- a/app/views/shared/_header_account.html.erb +++ b/app/views/shared/_header_account.html.erb @@ -1,6 +1,10 @@ <% if user_signed_in? %> -

- Signed in as <%= current_user.cn %>@kosmos.org. - <%= link_to "Log out", destroy_user_session_path, class: 'underline' %> -

+
+ + Signed in as <%= current_user.cn %>@kosmos.org + + + <%= link_to "Log out", destroy_user_session_path, class: 'underline hover:text-white' %> + +
<% end %> diff --git a/app/views/shared/_main_nav.html.erb b/app/views/shared/_main_nav.html.erb index 0da9406..5905646 100644 --- a/app/views/shared/_main_nav.html.erb +++ b/app/views/shared/_main_nav.html.erb @@ -1,26 +1,10 @@ - +<%= link_to "Services", root_path, + class: main_nav_class(@current_section, :dashboard) %> +<%= link_to "Invitations", invitations_path, + class: main_nav_class(@current_section, :invitations) %> +<%= link_to "Donations", donations_path, + class: main_nav_class(@current_section, :contributions) %> +<%= link_to "Wallet", wallet_path, + class: main_nav_class(@current_section, :wallet) %> +<%= link_to "Account", security_path, + class: main_nav_class(@current_section, :security) %> diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb index 1a641fa..8c800fa 100644 --- a/app/views/wallet/index.html.erb +++ b/app/views/wallet/index.html.erb @@ -1,87 +1,92 @@ -
-
-

Wallet

-

- Send and receive sats via the Bitcoin Lightning Network. -

-
-
-

- <% if @balance %> - <%= number_with_delimiter @balance %> sats
- Available balance - <% else %> - n/a sats
- Balance unavailable - <% end %> -

-
-
+<%= render partial: "components/header", locals: { page_title: "Wallet" } %> -
-

Lightning Address

-

- Your Kosmos user address is also a - Lightning Address! - The easiest way to receive sats is by just giving out your address: -

-

- <%= current_user.address %> -

-
+
+
+
+
+

+ Send and receive sats via the Bitcoin Lightning Network. +

+
+
+

+ <% if @balance %> + <%= number_with_delimiter @balance %> sats
+ Available balance + <% else %> + n/a sats
+ Balance unavailable + <% end %> +

+
+
-
-

Wallet Apps

-

- You can connect various wallet apps to your Kosmos account. This allows - you to both receive and send sats. Any wallet that supports - LNDHub - accounts should be able to add/import your account using our setup - code/URL: -

-

- - or - - -

- -
+
+

Lightning Address

+

+ Your Kosmos user address is also a + Lightning Address! + The easiest way to receive sats is by just giving out your address: +

+

+ <%= current_user.address %> +

+
-
-

Recommended Apps

-
-

- - <%= image_tag("/img/logos/bluewallet.svg", class: 'h-16') %> - -

-

- Android / iOS / macOS -

-

- When adding a wallet, choose "Import wallet" on the bottom of the screen, - then scan the setup QR code. -

-

- - <%= image_tag("/img/logos/alby.svg", class: 'h-16') %> - -

-

- Firefox / Chrome (Opera, Brave, Chromium-based browsers) -

-

- Choose "LNDHub (Bluewallet)" in the connect dialog and paste the setup - URL in the "LNDHub Export URI" field. -

+
+

Wallet Apps

+

+ You can connect various wallet apps to your Kosmos account. This allows + you to both receive and send sats. Any wallet that supports + LNDHub + accounts should be able to add/import your account using our setup + code/URL: +

+

+ + or + + +

+ +
+ +
+

Recommended Apps

+
+

+ + <%= image_tag("/img/logos/bluewallet.svg", class: 'h-16') %> + +

+

+ Android / iOS / macOS +

+

+ When adding a wallet, choose "Import wallet" on the bottom of the screen, + then scan the setup QR code. +

+

+ + <%= image_tag("/img/logos/alby.svg", class: 'h-16') %> + +

+

+ Firefox / Chrome (Opera, Brave, Chromium-based browsers) +

+

+ Choose "LNDHub (Bluewallet)" in the connect dialog and paste the setup + URL in the "LNDHub Export URI" field. +

+
+
-
+