Basic RESTful actions for cards.

This commit is contained in:
2020-12-28 19:54:28 -08:00
parent 4a31d8a31b
commit 6266b089a5
25 changed files with 427 additions and 102 deletions
+3 -1
View File
@@ -1,8 +1,10 @@
/* This file is for your main application css. */
@import "./phoenix.css";
@import "./bwc.css";
@import "./uikit.min.css";
/* Alerts and form errors */
.alert {
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
@@ -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{
border-bottom:1px solid #eee;
list-style:none;
@@ -97,6 +98,13 @@ div#chat{
font-weight:default;
}
.delete-tool{
float:right;
position:relative;
right:40px;
top:20px;
}
.card-template{
flex-direction: column;
width: min-content;
@@ -104,6 +112,13 @@ div#chat{
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{
margin-top:0px;
}
@@ -135,7 +150,11 @@ div.card-content{
.card-content{
font-size: 24px;
text-align:left;
margin: 2em;
margin: 1.5em;
}
.card-preview > .card-content {
font-size: 16px;
}
.card-content-box{
@@ -149,22 +168,29 @@ div.card-content{
}
#submitCard{
background: #393;
display:none;
padding: 0px 10px !important;
color:white;
background: #06D6A0;
width: 100px;
top:3px;position:relative;
margin-bottom:0px;
}
#submitCard:hover{
background: #3c3;
background: #05B384;
}
#newCard{
background: #e5e5e5;
color:#5e5e5e;
padding: 0px 10px !important;
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{
@@ -190,6 +216,7 @@ input#giphySearch{
.search-result{
margin: 10px;
max-width: 200px;
}
.uploader:hover{
@@ -215,9 +242,6 @@ input#giphySearch{
text-decoration: underline;
}
span#current-player-turn{
}
.meta-turn{
color: #1e87f0 !important;
font-weight:bold;
@@ -325,10 +349,6 @@ b.currentPlayer{
display:none;
}
#card-view{
display:none;
}
img.player{
width:100px;height:100px;
object-fit: cover;
@@ -347,9 +367,6 @@ img.player{
content:"";
}
.change-profile{
}
.change-profile:hover{
color: #0f6ecd;
+14 -1
View File
@@ -12,4 +12,17 @@ import "../css/app.scss"
// import {Socket} from "phoenix"
// 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";
+68
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;
}
});
+81
View File
@@ -1001,12 +1001,28 @@
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"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": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
"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": {
"version": "1.8.5",
"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": {
"version": "0.4.1",
"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": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -4559,6 +4587,15 @@
"integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
"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": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -6077,6 +6114,17 @@
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
"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": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -6209,6 +6257,23 @@
"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": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7444,6 +7509,22 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"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": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+5 -2
View File
@@ -16,12 +16,15 @@
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"sass-loader": "^8.0.2",
"node-sass": "^4.13.1",
"hard-source-webpack-plugin": "^0.13.1",
"jquery": "^3.5.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.2",
"uikit": "^3.6.5",
"uikit-icons": "^0.5.0",
"webpack": "4.41.5",
"webpack-cli": "^3.3.2"
}
+3
View File
File diff suppressed because one or more lines are too long
+3
View File
File diff suppressed because one or more lines are too long