kosmos/akkounts
kosmos/akkounts
8
1
Fork 0
Code Issues 19 Pull Requests 1 Actions Packages Releases 12 Activity

WIP New app layout
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Basti 2022-02-19 22:46:12 -06:00
parent a2889705ed
commit 4f2b35ccb9
Signed by untrusted user: basti
GPG Key ID: 9F88009D31D99C72
12 changed files with 372 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/components/base.css
View File

@ -3,9 +3,9 @@
@apply leading-none
}
h1, h2, h3 {
@apply font-light;
}
/* h1, h2, h3 { */
/* @apply font-light; */
/* } */
h1 {
@apply text-3xl uppercase;

44
app/assets/stylesheets/legacy/_layout.scss
View File

@ -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 {

8
app/helpers/application_helper.rb
View File

@ -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

5
app/views/components/_header.html.erb Normal file
View File

@ -0,0 +1,5 @@
<header class="py-10">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold text-white"><%= page_title %></h1>
</div>
</header>

11
app/views/dashboard/index.html.erb
View File

@ -1,5 +1,8 @@
<section>
<h2>Services</h2>
<%= render partial: "components/header", locals: { page_title: "Services" } %>
<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
<section>
<p>
Your Kosmos account and password currently give you access to these
services:
@ -55,4 +58,6 @@
</p>
</div>
</div>
</section>
</section>
</div>
</main>

23
app/views/donations/index.html.erb
View File

@ -1,12 +1,15 @@
<section>
<h2>Donations</h2>
<p>
Your financial contributions to the development and
upkeep of Kosmos software and services.
</p>
</section>
<%= render partial: "components/header", locals: { page_title: "Donations" } %>
<section>
<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
<section>
<p>
Your financial contributions to the development and upkeep of Kosmos
software and services.
</p>
</section>
<section>
<% if @donations.any? %>
<ul class="donations list-none">
<% @donations.each do |donation| %>
@ -38,4 +41,6 @@
No donations to show.
</p>
<% end %>
</section>
</section>
</div>
</main>

23
app/views/invitations/index.html.erb
View File

@ -1,24 +1,27 @@
<section>
<h2>Invitations</h2>
<%= render partial: "components/header", locals: { page_title: "Invitations" } %>
<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
<section>
<% if @invitations_unused.any? %>
<p>
Invite your friends to a Kosmos account by sharing an invitation URL with them:
</p>
<% end %>
</section>
</section>
<section>
<section>
<% if @invitations_unused.any? %>
<table>
<thead>
<tr>
<tr class="text-left">
<th>URL</th>
</tr>
</thead>
<tbody>
<% @invitations_unused.each do |invitation| %>
<tr>
<td><%= invitation_url(invitation.token) %></td>
<td class="font-mono"><%= invitation_url(invitation.token) %></td>
</tr>
<% end %>
</tbody>
@ -29,9 +32,9 @@
things come in time.
</p>
<% end %>
</section>
</section>
<% if @invitations_used.any? %>
<% if @invitations_used.any? %>
<section>
<h3>Accepted Invitations</h3>
<table>
@ -53,4 +56,6 @@
</tbody>
</table>
</section>
<% end %>
<% end %>
</div>
</main>

71
app/views/layouts/application.html.erb
View File

@ -11,29 +11,68 @@
<%= javascript_importmap_tags %>
</head>
<body>
<div id="wrapper">
<header>
<h1>
<span class ="icon"><%= render partial: "shared/icons/comet" %></span>
<span class ="project-name">Kosmos</span>
<span class ="site-name">Account</span>
</h1>
<%= render partial: 'shared/header_account' %>
</header>
<% if user_signed_in? && current_user.confirmed? %>
<div class="">
<nav class="">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="border-b border-gray-200/10">
<div class="flex items-center justify-between h-16 px-4 sm:px-0">
<div class="flex items-center">
<div class="ks-site-icon flex-shrink-0">
<%= render partial: "shared/icons/comet" %>
<!-- <img class="h&#45;8 w&#45;8" src="https://tailwindui.com/img/logos/workflow&#45;mark&#45;indigo&#45;500.svg" alt="Workflow"> -->
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<%= render partial: 'shared/main_nav' %>
<% end %>
</div>
</div>
</div>
<div class="hidden md:block">
<%= render partial: 'shared/header_account' %>
</div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="border-b border-gray-700 md:hidden" id="mobile-menu">
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
</div>
<button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<!-- Heroicon name: outline/bell -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</nav>
<%= yield %>
</div>
<div id="wrapper">
<% flash.each do |type, msg| %>
<div class="flash-msg <%= type %>">
<p><%= msg %></p>
</div>
<% end %>
<main>
<%= yield %>
</main>
</div>
</body>
</html>

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

@ -1,12 +1,18 @@
<section>
<h2>Security</h2>
</section>
<%= render partial: "components/header", locals: { page_title: "Account" } %>
<section>
<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
<section>
<h2>Security</h2>
</section>
<section>
<h3>Password change</h3>
<p>
<%= form_with(url: settings_reset_password_path, method: :post) do %>
<%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %>
<% end %>
</p>
</section>
</section>
</div>
</main>

12
app/views/shared/_header_account.html.erb
View File

@ -1,6 +1,10 @@
<% if user_signed_in? %>
<p class="current-user mt-8">
Signed in as <strong class="text-white font-normal"><%= current_user.cn %>@kosmos.org</strong>.
<%= link_to "Log out", destroy_user_session_path, class: 'underline' %>
</p>
<div class="flex items-baseline space-x-4 text-gray-200/80 text-sm font-medium">
<span>
Signed in as <strong class="text-white font-normal"><%= current_user.cn %>@kosmos.org</strong>
</span>
<span>
<%= link_to "Log out", destroy_user_session_path, class: 'underline hover:text-white' %>
</span>
</div>
<% end %>

36
app/views/shared/_main_nav.html.erb
View File

@ -1,26 +1,10 @@
<nav id="main-nav">
<div class="wrapper">
<ul class="pages">
<li>
<%= link_to "Services", root_path,
class: @current_section == :dashboard ? "active" : nil %>
</li>
<li>
<%= link_to "Invitations", invitations_path,
class: @current_section == :invitations ? "active" : nil %>
</li>
<li>
<%= link_to "Donations", donations_path,
class: @current_section == :contributions ? "active" : nil %>
</li>
<li>
<%= link_to "Wallet", wallet_path,
class: @current_section == :wallet ? "active" : nil %>
</li>
<li>
<%= link_to "Security", security_path,
class: @current_section == :security ? "active" : nil %>
</li>
</ul>
</div>
</nav>
<%= 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) %>

23
app/views/wallet/index.html.erb
View File

@ -1,6 +1,9 @@
<section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
<%= render partial: "components/header", locals: { page_title: "Wallet" } %>
<main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
<section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
<div class="md:col-span-8">
<h2>Wallet</h2>
<p>
Send and receive sats via the Bitcoin Lightning Network.
</p>
@ -16,9 +19,9 @@
<% end %>
</p>
</div>
</section>
</section>
<section>
<section>
<h3>Lightning Address</h3>
<p>
Your Kosmos user address is also a
@ -28,9 +31,9 @@
<p>
<strong><%= current_user.address %></strong>
</p>
</section>
</section>
<section>
<section>
<h3>Wallet Apps</h3>
<p>
You can connect various wallet apps to your Kosmos account. This allows
@ -48,9 +51,9 @@
<p id="setup-code" class="hidden my-10 w-full text-center">
<%= raw @svg %>
</p>
</section>
</section>
<section>
<section>
<h3>Recommended Apps</h3>
<div class="w-full grid grid-cols-1 gap-y-4 md:grid-cols-12
md:gap-y-6 md:gap-x-4 md:items-center">
@ -81,7 +84,9 @@
URL in the "LNDHub Export URI" field.
</p>
</div>
</section>
</section>
</div>
</main>
<script type="text/javascript">
(function () {