Basic RESTful actions for cards.

This commit is contained in:
Ryan Pandya 2020-12-28 19:54:28 -08:00
parent 4a31d8a31b
commit 6266b089a5
25 changed files with 427 additions and 102 deletions

1
.jsbeautifyrc Normal file
View File

@ -0,0 +1 @@
{"beautify.language": { "html": ["htm","html","html-eex","eex"]}}

View File

@ -7,9 +7,11 @@ defmodule Bwc do
@repo Repo @repo Repo
@doc """
List all cards. def get_title do
"""
end
def list_cards, do: @repo.all(Card) def list_cards, do: @repo.all(Card)
def get_card(id), do: @repo.get!(Card, id) def get_card(id), do: @repo.get!(Card, id)

View File

@ -10,7 +10,8 @@ defmodule Bwc.Application do
children = [ children = [
# Starts a worker by calling: Bwc.Worker.start_link(arg) # Starts a worker by calling: Bwc.Worker.start_link(arg)
# {Bwc.Worker, arg} # {Bwc.Worker, arg}
{Bwc.Repo, []} {Bwc.Repo, []},
{Phoenix.PubSub, [name: Bwc.PubSub, adapter: Phoenix.PubSub.PG2]}
] ]
# See https://hexdocs.pm/elixir/Supervisor.html # See https://hexdocs.pm/elixir/Supervisor.html

View File

@ -1,8 +1,10 @@
/* This file is for your main application css. */ /* This file is for your main application css. */
@import "./phoenix.css"; @import "./phoenix.css";
@import "./bwc.css";
@import "./uikit.min.css";
/* Alerts and form errors */ /* Alerts and form errors */
.alert { .alert {
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid transparent; border: 1px solid transparent;

View File

@ -1,10 +1,11 @@
html{ .bwc-logo{
width:550px;
} }
#top-bar{
border-bottom: 2px solid gainsboro;
padding-bottom:1em;
#play_mode{
display:none;
} }
li.message{ li.message{
border-bottom:1px solid #eee; border-bottom:1px solid #eee;
list-style:none; list-style:none;
@ -97,6 +98,13 @@ div#chat{
font-weight:default; font-weight:default;
} }
.delete-tool{
float:right;
position:relative;
right:40px;
top:20px;
}
.card-template{ .card-template{
flex-direction: column; flex-direction: column;
width: min-content; width: min-content;
@ -104,6 +112,13 @@ div#chat{
box-shadow: 0 5px 15px rgba(0,0,0,0.08); box-shadow: 0 5px 15px rgba(0,0,0,0.08);
} }
.card-preview{
flex-direction: column;
width: 250px;
min-height:300px;
margin:1rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.card-title{ .card-title{
margin-top:0px; margin-top:0px;
} }
@ -135,7 +150,11 @@ div.card-content{
.card-content{ .card-content{
font-size: 24px; font-size: 24px;
text-align:left; text-align:left;
margin: 2em; margin: 1.5em;
}
.card-preview > .card-content {
font-size: 16px;
} }
.card-content-box{ .card-content-box{
@ -149,22 +168,29 @@ div.card-content{
} }
#submitCard{ #submitCard{
background: #393; padding: 0px 10px !important;
display:none; color:white;
background: #06D6A0;
width: 100px;
top:3px;position:relative; top:3px;position:relative;
margin-bottom:0px;
} }
#submitCard:hover{ #submitCard:hover{
background: #3c3; background: #05B384;
} }
#newCard{ #newCard{
background: #e5e5e5; padding: 0px 10px !important;
color:#5e5e5e; width: 100px;
color:rgb(107, 58, 2);
background: #fff9eb;
top:3px;position:relative;
margin-bottom:0px;
}
#newCard:hover{
background: #ffedc2;
} }
#newCard:hover{
background:#f9f9f9;
}
.image-tools{ .image-tools{
@ -190,6 +216,7 @@ input#giphySearch{
.search-result{ .search-result{
margin: 10px; margin: 10px;
max-width: 200px;
} }
.uploader:hover{ .uploader:hover{
@ -215,9 +242,6 @@ input#giphySearch{
text-decoration: underline; text-decoration: underline;
} }
span#current-player-turn{
}
.meta-turn{ .meta-turn{
color: #1e87f0 !important; color: #1e87f0 !important;
font-weight:bold; font-weight:bold;
@ -325,10 +349,6 @@ b.currentPlayer{
display:none; display:none;
} }
#card-view{
display:none;
}
img.player{ img.player{
width:100px;height:100px; width:100px;height:100px;
object-fit: cover; object-fit: cover;
@ -347,9 +367,6 @@ img.player{
content:""; content:"";
} }
.change-profile{
}
.change-profile:hover{ .change-profile:hover{
color: #0f6ecd; color: #0f6ecd;

View File

@ -12,4 +12,17 @@ import "../css/app.scss"
// import {Socket} from "phoenix" // import {Socket} from "phoenix"
// import socket from "./socket" // import socket from "./socket"
// //
import "phoenix_html" import "phoenix_html";
import "jquery";
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
// loads the Icon plugin
UIkit.use(Icons);
import "./bwc.js";

View File

@ -0,0 +1,68 @@
import $ from 'jquery';
import UIkit from 'uikit';
window.jQuery = $;
window.$ = $;
window.UIkit = UIkit;
window.deleteCard = (id) => {
var CSRF_TOKEN = $("input[name=_csrf_token]").val();
$.ajax({
url: "/api/cards/" + id,
method: 'DELETE',
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN);
}
}).done(function(response) {
UIkit.notification(response['data']);
$("div#card-" + response['card']).remove();
});
}
window.chooseGiphy = (url) => {
$("img.card-picture").attr("src", url);
$("input#card_picture").val(url);
$(".uk-close").click();
}
window.giphySearch = () => {
var query = $("#giphySearch").val().trim().replace(/ /g, "+");
const api_url = "https://api.giphy.com/v1/gifs/search?api_key=GUHvLYHRcNgPAIKt4PNZcjYw5FBeBX0F&q=" + query + "&limit=25&offset=0&rating=R&lang=en";
$.ajax({
url: api_url,
method: 'GET'
}).done(function(response) {
// This is the API response data. It's a JSON object of 25 gifs
console.log(response.data);
$("#giphySearchResults").html("");
response.data.forEach(function(i) {
var giphyURL = i.images.fixed_height.url;
$("#giphySearchResults").append(
"<a href='javascript:chooseGiphy(" +
'"' +
giphyURL +
'"' +
");'><img class='search-result' src='" + giphyURL + "'/></a>"
);
});
});
};
$("#giphySearch").keyup(function(e) {
if (e.keyCode == "13") {
giphySearch();
}
});
$("#giphySearchButton").click(function(e) {
giphySearch();
});
$('#imageModalContent').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});

View File

@ -1001,12 +1001,28 @@
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==", "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true "dev": true
}, },
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
"dev": true
},
"@types/q": { "@types/q": {
"version": "1.5.4", "version": "1.5.4",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
"dev": true "dev": true
}, },
"@types/react": {
"version": "16.14.2",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.2.tgz",
"integrity": "sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
},
"@webassemblyjs/ast": { "@webassemblyjs/ast": {
"version": "1.8.5", "version": "1.8.5",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@ -2681,6 +2697,12 @@
} }
} }
}, },
"csstype": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
"integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
"dev": true
},
"currently-unhandled": { "currently-unhandled": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@ -4379,6 +4401,12 @@
} }
} }
}, },
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
"dev": true
},
"js-base64": { "js-base64": {
"version": "2.6.4", "version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@ -4559,6 +4587,15 @@
"integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
"dev": true "dev": true
}, },
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"loud-rejection": { "loud-rejection": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@ -6077,6 +6114,17 @@
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
"dev": true "dev": true
}, },
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
"prr": { "prr": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@ -6209,6 +6257,23 @@
"safe-buffer": "^5.1.0" "safe-buffer": "^5.1.0"
} }
}, },
"react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"read-pkg": { "read-pkg": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@ -7444,6 +7509,22 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true "dev": true
}, },
"uikit": {
"version": "3.6.5",
"resolved": "https://registry.npmjs.org/uikit/-/uikit-3.6.5.tgz",
"integrity": "sha512-ChsoZBuCC4y0CXqJ51tiIPS4zcKgj8yvXDl8njRyMBLCjNRFlHgSjem2T6pQsEEItoN+Vh7NE3iueD70A4LW4A==",
"dev": true
},
"uikit-icons": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/uikit-icons/-/uikit-icons-0.5.0.tgz",
"integrity": "sha512-KOXrEp6pKp6i9GvVdsi0P0dVOxd0QddCsvWcMTezyiHe44X6V2Uwj1mU5WX5bs6balVbxSKULkXlRRngYh0DrA==",
"dev": true,
"requires": {
"@types/react": "^16.9.11",
"react": "^16.11.0"
}
},
"unicode-canonical-property-names-ecmascript": { "unicode-canonical-property-names-ecmascript": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",

View File

@ -16,12 +16,15 @@
"babel-loader": "^8.0.0", "babel-loader": "^8.0.0",
"copy-webpack-plugin": "^5.1.1", "copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2", "css-loader": "^3.4.2",
"sass-loader": "^8.0.2",
"node-sass": "^4.13.1",
"hard-source-webpack-plugin": "^0.13.1", "hard-source-webpack-plugin": "^0.13.1",
"jquery": "^3.5.1",
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1", "optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.2", "terser-webpack-plugin": "^2.3.2",
"uikit": "^3.6.5",
"uikit-icons": "^0.5.0",
"webpack": "4.41.5", "webpack": "4.41.5",
"webpack-cli": "^3.3.2" "webpack-cli": "^3.3.2"
} }

File diff suppressed because one or more lines are too long

3
apps/bwc_web/assets/static/uikit.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@ -13,8 +13,22 @@ defmodule BwcWeb.CardController do
end end
def create(conn,card_params) do def create(conn,card_params) do
{:ok, card} = Bwc.create_card(Map.get(card_params,"card")) case Bwc.create_card(Map.get(card_params,"card")) do
redirect(conn, to: Routes.card_path(conn, :show, card)) {:ok, card} -> redirect(conn, to: Routes.card_path(conn, :show, card))
{:error, card} -> render(conn, "new.html", card: card)
end
end
def delete(conn, params) do
id = Map.get(params, "id")
{:ok, card} = Bwc.delete_card(Bwc.get_card(id))
render(conn, "delete.json", card: card)
end
def index(conn, _params) do
cards = Bwc.list_cards()
render(conn, "index.html", cards: cards)
end end
end end

View File

@ -19,14 +19,15 @@ defmodule BwcWeb.Router do
get "/", PageController, :index get "/", PageController, :index
get "/create", CardController, :new get "/create", CardController, :new
resources "/cards", CardController, only: [:show, :new, :create] resources "/cards", CardController, only: [:show, :new, :create, :index]
end end
# Other scopes may use custom stacks. scope "/api", BwcWeb do
# scope "/api", BwcWeb do pipe_through :api
# pipe_through :api
# end resources "/cards", CardController, only: [:delete]
end
# Enables LiveDashboard only for development # Enables LiveDashboard only for development
# #

View File

@ -0,0 +1,45 @@
<div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top uk-flex-column">
<h1>All Cards</h1>
<hr/>
<div class="uk-flex uk-flex-wrap uk-flex-center">
<input type="hidden" value="<%= Phoenix.Controller.get_csrf_token() %>" name="_csrf_token"/>
<%= if Enum.empty? @cards do %>
<div class="create">
There are no cards.<br/>
What are you waiting for?
<a href="/create">
Create a card!
</a>
</div>
<% end %>
<%= for card <- @cards do %>
<div class="uk-flex uk-text-center" id="card-<%=card.id%>">
<div class="card-preview uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
<h3 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= card.title %> </h3>
<div class="card-picture uk-flex uk-flex-center">
<img class="card-picture" src="<%=card.picture%>" />
</div>
<div class="card-content uk-flex uk-flex-center">
<%=card.description %>
</div>
</div>
<a class="delete-tool" uk-icon="icon: trash; ratio:1" uk-tooltip="title: Delete" href="javascript:deleteCard(<%=card.id %>)"></a>
</div>
<% end %>
</div>
<div class="create uk-margin-top">
<hr />
What are you waiting for?
<a href="/create">
Create more cards!
</a>
</div>

View File

@ -1,12 +1,46 @@
<h1>New Card</h1> <div class="new-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
<%= form_for @card, Routes.card_path(@conn, :create), fn f -> %> <%= form_for @card, Routes.card_path(@conn, :create), fn f -> %>
<%= label f, :title %> <%= text_input f, :title, class: "card-title uk-text-xlarge uk-margin-large-bottom" %>
<%= text_input f, :title %> <%= error_tag f, :title %>
<%= label f, :picture %> <div class="card-picture uk-flex uk-flex-center uk-inline">
<%= text_input f, :picture %> <%= text_input f, :picture, class: "uk-hidden" %>
<%= label f, :description %> <img class="card-picture" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIi8+DQo8ZyBvcGFjaXR5PSIwLjciPg0KCTxwYXRoIGZpbGw9IiNEOEQ4RDgiIGQ9Ik0yMjguMTg0LDE0My41djExM2gxNDMuNjMydi0xMTNIMjI4LjE4NHogTTM2MC4yNDQsMjQ0LjI0N0gyNDAuNDM3di04OC40OTRoMTE5LjgwOEwzNjAuMjQ0LDI0NC4yNDcNCgkJTDM2MC4yNDQsMjQ0LjI0N3oiLz4NCgk8cG9seWdvbiBmaWxsPSIjRDhEOEQ4IiBwb2ludHM9IjI0Ni44ODEsMjM0LjcxNyAyNzEuNTcyLDIwOC43NjQgMjgwLjgyNCwyMTIuNzY4IDMxMC4wMTYsMTgxLjY4OCAzMjEuNTA1LDE5NS40MzQgDQoJCTMyNi42ODksMTkyLjMwMyAzNTQuNzQ2LDIzNC43MTcgCSIvPg0KCTxjaXJjbGUgZmlsbD0iI0Q4RDhEOCIgY3g9IjI3NS40MDUiIGN5PSIxNzguMjU3IiByPSIxMC43ODciLz4NCjwvZz4NCjwvc3ZnPg0K" />
<%= textarea f, :description %> <div class="image-tools uk-flex uk-overlay-default uk-position-center">
<div> <a class="image-tool" id="imageSearch" uk-icon="icon: search; ratio:2" uk-tooltip="title: Search" uk-toggle="target: #imageModal"></a>
<%= submit "Submit" %> <!--a class="image-tool" id="imageInsta" uk-icon="icon: instagram; ratio: 2" uk-tooltip="Instagram"></a>
<div class="uploader" uk-form-custom style="margin:1em;" uk-tooltip="Upload">
<input type="file">
<a style="margin:0px;" class="image-tool" id="imageUpload" uk-icon="icon: upload; ratio: 2"></a></div>
<a class="image-tool" id="imageDraw" uk-icon="icon: pencil; ratio: 2" uk-tooltip="Draw"></a-->
</div>
</div>
<div class="card-content uk-flex uk-flex-center">
<%= textarea f, :description, class: "card-content-box"%>
<%= error_tag f, :description %>
</div>
<div class="controls uk-margin-top">
<div class="uk-flex uk-flex-center">
<ul class="uk-subnav uk-subnav-pill" style="margin-bottom:0px;">
<li><button id="newCard" class="uk-subnav-pill" href="#">New</a></li>
<li>
<%= submit "Submit", class: "uk-active uk-subnav-pill", id: "submitCard" %>
</li>
</ul>
</div>
</div> </div>
<% end %> <%end %>
</div>
<div id="imageModal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<form class='uk-search uk-search-large' id="imageModalContent">
<a href="#" id="giphySearchButton" class="uk-search-icon-flip" uk-search-icon></a>
<input id="giphySearch" class="uk-search-input" placeholder="Search GIPHY..." />
</form>
<div id="giphySearchResults" class="uk-flex uk-flex-center uk-flex-wrap">
</div>
<button class="uk-modal-close-default" type="button" uk-close></button>
</div>
</div>

View File

@ -1,10 +1,22 @@
<div> <div id="play_mode" class="game-mode uk-flex uk-text-center">
<h1><%= @card.title %> </h1> <div id='card-view' class="active-card card-template uk-panel uk-panel-box uk-panel-box-secondary uk-padding uk-flex">
<span class="uk-label your-card-" style="display:none;">your card</span>
<h1 class="card-title uk-text-xlarge uk-margin-large-bottom"><%= @card.title %> </h1>
<div class="card-picture uk-flex uk-flex-center">
<img class="card-picture" src="<%=@card.picture%>" />
</div>
<div class="card-content uk-flex uk-flex-center">
<%=@card.description %>
</div>
</div> <!-- active-card -->
<div class="picture"> <div class="active-card-controls uk-margin-top">
<img src="<%= Routes.static_path(@conn, @card.picture) %>"/> <div class="uk-flex uk-flex-center">
</div> <ul class="uk-subnav uk-subnav-pill">
<div class="description"> <li class="card-control reveal-card"><a onClick="revealCard()" id="revealCard" href="#">Reveal Card</a></li>
<%= @card.description %> <li class="card-control done-with-card"> <a onClick="doneWithCard()" id="doneWithCard" class="uk-subnav-pill"
href="#">Done</a></li>
</ul>
</div>
</div> </div>
</div> </div>

View File

@ -1,33 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"/> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blank White Cards!</title> <title>Blank White Cards!</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/> <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>" />
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head> </head>
<body>
<header> <body>
<section class="container"> <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom uk-height-1-1">
<nav role="navigation"> <div class="uk-text-center uk-container" id="top-bar">
<ul> <h1 class="uk-heading-line-">
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li> <a href="/">
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %> <img class="bwc-logo" src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo" />
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li> </a>
<% end %> </h1>
</ul> </div>
</nav>
<a href="/" class="phx-logo"> <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<img src="<%= Routes.static_path(@conn, "/images/bwc.png") %>" alt="BWC Logo"/> <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
</a> <div class="uk-text-center uk-container uk-flex uk-flex-center uk-margin-top">
</section> <%= @inner_content %>
</header> </div>
<main role="main" class="container"> </div>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p> </body>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</main>
</body>
</html> </html>

View File

@ -1,18 +1,19 @@
<div style="margin:0 auto; width: 800px; text-align:center;"> <div class='uk-container uk-container-center uk-flex uk-text-center uk-flex-column'>
<h1></h1> <div class="logo uk-flex uk-flex-center uk-margin-large-bottom">
<img width=400px src="<%= Routes.static_path(@conn, "/images/logo.png") %>" />
<div class="picture"> </div>
<img height=200px src="<%= Routes.static_path(@conn, "/images/logo.png") %>"/> <div>
</div> <h2><%= @status %></h2>
<div class="description"> <i>Cards in the pot: <%= length(@cards) %></i>
<h2><%= @status %></h2> <emph>
<i>Cards in the pot: <%= length(@cards) %></i> <%= link("(View all)", to: Routes.card_path(@conn, :index)) %>
</div> </emph>
<hr/> <hr />
<div class="create"> <div class="create">
What are you waiting for? What are you waiting for?
<a href="/create"> <a href="/create">
Create a card! Create a card!
</a> </a>
</div> </div>
</div>
</div> </div>

View File

@ -1,3 +1,14 @@
defmodule BwcWeb.CardView do defmodule BwcWeb.CardView do
require Logger
use BwcWeb, :view use BwcWeb, :view
def render("delete.json", params) do
card = Map.get(params,:card)
Logger.debug(card.title)
%{
data: "Deleted '#{card.title}'.",
card: card.id
}
end
end end

3
apps/bwc_web/package-lock.json generated Normal file
View File

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}

View File

@ -27,7 +27,8 @@ config :bwc_web, BwcWeb.Endpoint,
url: [host: "localhost"], url: [host: "localhost"],
secret_key_base: "jJqmdDJIM8vfETjEax9POp8CbgJbaID++sXZCrxsjFdIywS9qi6D1jBWSDTElzcd", secret_key_base: "jJqmdDJIM8vfETjEax9POp8CbgJbaID++sXZCrxsjFdIywS9qi6D1jBWSDTElzcd",
render_errors: [view: BwcWeb.ErrorView, accepts: ~w(html json), layout: false], render_errors: [view: BwcWeb.ErrorView, accepts: ~w(html json), layout: false],
live_view: [signing_salt: "IRwB6447"] live_view: [signing_salt: "IRwB6447"],
pubsub_server: Bwc.PubSub
# Sample configuration: # Sample configuration:
# #

11
package-lock.json generated Normal file
View File

@ -0,0 +1,11 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"uikit": {
"version": "3.6.5",
"resolved": "https://registry.npmjs.org/uikit/-/uikit-3.6.5.tgz",
"integrity": "sha512-ChsoZBuCC4y0CXqJ51tiIPS4zcKgj8yvXDl8njRyMBLCjNRFlHgSjem2T6pQsEEItoN+Vh7NE3iueD70A4LW4A=="
}
}
}