From 68a99648e9e3de7c33489a0b0198f5f3282ebb5b Mon Sep 17 00:00:00 2001 From: Tim DuBois Date: Wed, 20 Dec 2017 20:25:47 +0100 Subject: [PATCH] Cutdown build and restyle. Hopefully will work --- .gitignore | 4 +- app/brunch-config.js | 46 +-- app/elm/Main.elm | 13 +- app/elm/Markdown.elm | 2 +- app/elm/Models.elm | 3 +- app/elm/Msg.elm | 2 +- app/elm/Native/LocalStorage.js | 114 ------- app/elm/Request/Comment.elm | 15 +- app/elm/Style.elm | 555 +++++++++++++++++---------------- app/elm/Stylesheets.elm | 22 -- app/elm/Update.elm | 4 +- app/elm/Util.elm | 2 +- app/elm/View.elm | 100 +++--- app/elm/elm-package.json | 4 +- app/package.json | 10 +- 15 files changed, 353 insertions(+), 543 deletions(-) delete mode 100644 app/elm/Native/LocalStorage.js delete mode 100644 app/elm/Stylesheets.elm diff --git a/.gitignore b/.gitignore index 89a13ff6..83f27a51 100644 --- a/.gitignore +++ b/.gitignore @@ -6,8 +6,7 @@ app/node_modules app/elm/elm-stuff app/elm/tests/elm-stuff app/js/main.js -app/css/main.css -app/css/oration.css +app/css/ app/package-lock.json Cargo.lock *.db @@ -15,3 +14,4 @@ Cargo.lock .env .vagrant staging/deploy +releases diff --git a/app/brunch-config.js b/app/brunch-config.js index 8d39defd..3a80fffa 100644 --- a/app/brunch-config.js +++ b/app/brunch-config.js @@ -2,28 +2,19 @@ exports.config = { files: { javascripts: { joinTo: "js/oration.js" - }, - stylesheets: { - joinTo: "css/oration.css" } }, conventions: { - // This option sets where we should place non-css and non-js assets in. - // By default, we set this to "/assets/static". Files in this directory - // will be copied to `paths.public`, which is set below to "../public". assets: /^(static)/, ignored: /elm-stuff/ }, - // paths configuration paths: { - // Dependencies and current project directories to watch watched: ["static", "js", "css", "elm"], - // Where to compile files to public: "../public" }, plugins: { babel: { - // Do not use ES6 compiler for debugging + // Do not use ES6 transpiler for debugging ignore: [/main.js$/] }, elmBrunch: { @@ -31,41 +22,6 @@ exports.config = { mainModules: ["Main.elm"], makeParameters: ["--warn","--debug"], outputFolder: "../js" - }, - elmCss: { - projectDir: "elm", - sourcePath: "Stylesheets.elm", - pattern: "Style.elm", - outputDir: "../css" - }, - cssnano: { - preset: [ - 'default', - {discardComments: {removeAll: true}} - ] - } - }, - modules: { - autoRequire: { - "js/oration.js": ["js/oration"] - } - }, - overrides: { - production: { - optimize: true, - sourceMaps: false, - plugins: { - autoReload: { - enabled: false - }, - babel: { - //Transpile the main file in production - ignore: [] - }, - elmBrunch: { - makeParameters: ["--warn"] - } - } } } }; diff --git a/app/elm/Main.elm b/app/elm/Main.elm index a441d77e..c8b30560 100644 --- a/app/elm/Main.elm +++ b/app/elm/Main.elm @@ -1,5 +1,6 @@ module Main exposing (main) +import Html.Styled exposing (toUnstyled) import Http import Models exposing (Model, Status(Commenting)) import Msg exposing (Msg) @@ -14,7 +15,7 @@ import View exposing (view) main : Program Never Model Msg main = - Navigation.program Msg.Post { init = init, view = view, update = update, subscriptions = subscriptions } + Navigation.program Msg.Pathname { init = init, view = view >> toUnstyled, update = update, subscriptions = subscriptions } init : Navigation.Location -> ( Model, Cmd Msg ) @@ -31,7 +32,7 @@ init location = } , comments = [] , count = 0 - , post = location + , pathname = location.pathname , title = "" , debug = "" , now = dateTime zero @@ -39,19 +40,19 @@ init location = , blogAuthor = "" , status = Commenting } - , initialise location + , initialise location.pathname ) -initialise : Navigation.Location -> Cmd Msg -initialise location = +initialise : String -> Cmd Msg +initialise pathname = let loadHashes = Request.Init.hashes |> Http.toTask loadComments = - Request.Comment.comments location + Request.Comment.comments pathname |> Http.toTask in Cmd.batch diff --git a/app/elm/Markdown.elm b/app/elm/Markdown.elm index fc3a4469..65370203 100644 --- a/app/elm/Markdown.elm +++ b/app/elm/Markdown.elm @@ -21,7 +21,7 @@ module Markdown -} -import Html exposing (Attribute, Html) +import Html.Styled exposing (Attribute, Html) import Native.Markdown diff --git a/app/elm/Models.elm b/app/elm/Models.elm index 50256e32..6224a6c8 100644 --- a/app/elm/Models.elm +++ b/app/elm/Models.elm @@ -2,7 +2,6 @@ module Models exposing (Model, Status(..)) import Data.Comment exposing (Comment, Inserted) import Data.User exposing (User) -import Navigation exposing (Location) import Time.DateTime exposing (DateTime) @@ -12,7 +11,7 @@ type alias Model = , user : User , comments : List Comment , count : Int - , post : Location + , pathname : String , title : String , debug : String , now : DateTime diff --git a/app/elm/Msg.elm b/app/elm/Msg.elm index 89d1dee2..27145f10 100644 --- a/app/elm/Msg.elm +++ b/app/elm/Msg.elm @@ -16,7 +16,7 @@ type Msg | UpdatePreview | SetPreview (Maybe String) | Count (Result Http.Error String) - | Post Location + | Pathname Location | StoreUser | Title String | PostComment diff --git a/app/elm/Native/LocalStorage.js b/app/elm/Native/LocalStorage.js deleted file mode 100644 index de9e8954..00000000 --- a/app/elm/Native/LocalStorage.js +++ /dev/null @@ -1,114 +0,0 @@ -var _Libbum$oration$Native_LocalStorage = function() -{ - function storageAvailable(type) { - try { - var storage = window[type], - x = '__storage_test__'; - storage.setItem(x, x); - storage.removeItem(x); - return true; - } - catch(e) { - return false; - } - } - - function isStorageAvailable() { - if (typeof window === "undefined"){ - return false; - } else if (!storageAvailable('localStorage') || typeof window.localStorage === "undefined"){ - return false; - } - return true; - } - - // shorthand for native APIs - var unit = {ctor: '_Tuple0'}; - var nativeBinding = _elm_lang$core$Native_Scheduler.nativeBinding; - var succeed = _elm_lang$core$Native_Scheduler.succeed; - var fail = _elm_lang$core$Native_Scheduler.fail; - var Nothing = _elm_lang$core$Maybe$Nothing; - var Just = _elm_lang$core$Maybe$Just; - - - function set(key, value) { - return nativeBinding(function(callback) { - try { - localStorage.setItem(key, value); - return callback(succeed( unit )); - } catch (e) { - return callback(fail( {'ctor': 'Overflow'} )); - } - }); - } - - - function get (key) { - return nativeBinding(function(callback) { - var value = localStorage.getItem(key); - return callback(succeed( - (value === null) ? Nothing : Just(value) - )); - }); - } - - - function remove (key) { - return nativeBinding(function(callback) { - localStorage.removeItem(key); - return callback(succeed( unit )); - }); - } - - - var keys = nativeBinding(function(callback) { - var _keys = []; - for (var i = 0; i < localStorage.length; i++) { - var key = localStorage.key(i); - _keys.push(key); - } - return callback(succeed( - _elm_lang$core$Native_List.fromArray( _keys ) - )); - }); - - - var clear = nativeBinding(function(callback) { - localStorage.clear(); - return callback(succeed( unit )); - }); - - - var storageFail = nativeBinding(function(callback) { - return callback(fail( {ctor: 'NoStorage'} )); - }); - - function storageFail2(a, b) { - return storageFail; - } - function storageFail1(a) { - return storageFail; - } - - - if (isStorageAvailable()) { - return { - get: get, - set: F2(set), - remove: remove, - clear: clear, - keys: keys - } - } - else { - return { - get: storageFail1, - set: F2(storageFail2), - remove: storageFail1, - clear: storageFail, - keys: storageFail - } - } - -}(); - diff --git a/app/elm/Request/Comment.elm b/app/elm/Request/Comment.elm index 466fe229..65c13f69 100644 --- a/app/elm/Request/Comment.elm +++ b/app/elm/Request/Comment.elm @@ -6,16 +6,15 @@ import Http import HttpBuilder import Json.Decode as Decode import Models exposing (Model) -import Navigation exposing (Location) {-| Request the number of comments for a given post -} -count : Location -> Http.Request String -count location = +count : String -> Http.Request String +count pathname = "/oration/count" |> HttpBuilder.get - |> HttpBuilder.withQueryParams [ ( "url", location.pathname ) ] + |> HttpBuilder.withQueryParams [ ( "url", pathname ) ] |> HttpBuilder.withExpect Http.expectString |> HttpBuilder.toRequest @@ -29,7 +28,7 @@ post model = body = [ ( "comment", model.comment ) , ( "title", model.title ) - , ( "path", model.post.pathname ) + , ( "path", model.pathname ) ] --User details are only sent if they exist @@ -122,8 +121,8 @@ delete id identity = {-| Request the comments for the current url -} -comments : Location -> Http.Request (List Comment) -comments location = +comments : String -> Http.Request (List Comment) +comments pathname = let expect = Decode.list Comment.decoder @@ -132,7 +131,7 @@ comments location = in "/oration/comments" |> HttpBuilder.get - |> HttpBuilder.withQueryParams [ ( "url", location.pathname ) ] + |> HttpBuilder.withQueryParams [ ( "url", pathname ) ] |> HttpBuilder.withExpect expect |> HttpBuilder.toRequest diff --git a/app/elm/Style.elm b/app/elm/Style.elm index f8948d36..bb91dcb6 100644 --- a/app/elm/Style.elm +++ b/app/elm/Style.elm @@ -1,281 +1,49 @@ module Style exposing (..) import Css exposing (..) -import Css.Elements exposing (button, img, input, label, li, p, textarea, typeSelector) -import Css.Namespace exposing (namespace) -import Html.CssHelpers exposing (withNamespace) - - -type OrationClasses - = Submit - | Footer - | Response - | Thread - | BlogAuthor - | Identicon - | Author - | Deleted - | Date - | Comment - | Content - | Form - | Spacer - | User - | Control - | Block - | LeftMargin10 - | Hidden - | Toggle - | Votes - - -type OrationIds - = Oration - | OrationComments - | OrationForm - | OrationReplyForm - | OrationPreviewCheck - | OrationCommentPreview - - -orationNamespace : Html.CssHelpers.Namespace String class id msg -orationNamespace = - withNamespace "oration" - - - -{- Colors -} - - -primaryColor : Color -primaryColor = - hex "6496c8" - - -hoverColor : Color -hoverColor = - hex "346392" - - -activeColor : Color -activeColor = - hex "27496d" - - -css : Stylesheet -css = - (stylesheet << namespace orationNamespace.name) - [ class Submit - [ color (hex "fff") - , textShadow3 (px -2) (px -2) hoverColor - , backgroundColor (hex "ff9664") - , backgroundImage (linearGradient2 toTop (stop primaryColor) (stop hoverColor) []) - , cursor pointer - , borderRadius (px 15) - , border zero - , boxShadow6 inset zero zero zero (px 1) activeColor - , hover [ property "box-shadow" "inset 0 0 0 1px #27496d,0 5px 15px #193047" ] - , active [ property "box-shadow" "inset 0 0 0 1px #27496d,0 5px 30px #193047" ] - , disabled [ color (hex "ccc") ] - , padding2 (px 10) (px 20) - , marginLeft (px 20) - ] - , class Footer - [ children - [ button - [ clickableStyle - , border3 (px 1) solid primaryColor - , borderRadius (px 15) - , marginBottom (px 10) - , marginRight (px 10) - , fontSize (pt 10) - , disabled - [ cursor default - , color (hex "ccc") - ] - ] - ] - ] - , class Votes - [ color primaryColor - , marginRight (px 10) - , children - [ button - [ clickableStyle - , border3 (px 1) solid primaryColor - , borderRadius (px 15) - , fontSize (pt 10) - , disabled - [ cursor default - , color (hex "ccc") - ] - ] - ] - ] - , class Response - [ paddingLeft (px 20) - , border3 (px 1) solid (hex "F00") - ] - , class Control - [ float right - , display block - , marginBottom (px 5) - ] - , class Block - [ display block - ] - , class Hidden - [ display none - ] - , class Toggle - [ clickableStyle - , border zero - ] - , class BlogAuthor - [ backgroundColor (rgba 0 0 0 0.03) ] - , class Author - [ fontWeight bold - , color (hex "555") - ] - , class Deleted - [ fontStyle italic - , color (hex "555") - , padding2 zero (px 6) - , marginBottom (px 10) - , display inlineBlock - ] - , each [ class Date, class Spacer ] - [ color (hex "666") - , fontWeight normal - , textShadow none - ] - , class Spacer - [ padding2 zero (px 6) - ] - , class Content - [ padding (px 0) - , children - [ p - [ firstOfType - [ marginTop (em 0.5) ] - , lastOfType - [ marginBottom (em 0.25) ] - ] - ] - , descendants - [ img - [ maxWidth (pct 100) - ] - , Css.Elements.pre - [ overflowX auto - ] - ] - ] - , class Comment - [ padding (px 0) ] - , class Identicon - [ display inlineBlock - , verticalAlign middle - , marginRight (px 10) - ] - , class LeftMargin10 - [ marginLeft (px 10) - ] - , typeSelector "input[type=\"checkbox\"]" - [ adjacentSiblings - [ label - [ lastChild - [ marginBottom zero ] - , before - [ display inlineBlock - , property "content" "''" - , width (px 20) - , height (px 20) - , border3 (px 1) solid (rgba 0 0 0 0.5) - , position absolute - , left (px 5) - , top zero - , opacity (num 0.6) - , property "-webkit-transition" "all .12s, border-color .08s" - , property "transition" "all .12s, border-color .08s" - ] - , display inlineBlock - , position relative - , paddingLeft (px 30) - , cursor pointer - , property "-webkit-user-select" "none" - , property "-moz-user-select" "none" - , property "-ms-user-select" "none" - ] - ] - , display none - , checked - [ adjacentSiblings - [ label - [ before - [ width (px 10) - , top (px -5) - , left (px 10) - , borderRadius zero - , opacity (int 1) - , borderTopColor transparent - , borderLeftColor transparent - , transform (rotate (deg 45)) - , property "-webkit-transform" "rotate(45deg)" - ] - ] - ] - ] - ] - , class Form - [ children - [ textarea [ inputStyle ] - ] - , margin3 zero auto (px 10) - , float left - ] - , class User - [ paddingTop (px 2) - , paddingBottom (px 5) - , children - [ input - [ inputStyle - , width (px 162) - ] - ] - ] - , Css.Elements.code - [ fontSize (px 14) - ] - , id OrationComments - [ padding zero - , children - [ li - [ firstChild - [ border zero - ] - ] - ] - ] - , li - [ listStyleType none - , borderTop3 (px 1) solid (rgba 0 0 0 0.2) - , paddingTop (px 5) - ] - , id Oration - [ width (px 597) +import Css.Foreign exposing (children, descendants, id, typeSelector) +import Html.Styled exposing (..) + + +{-| A plain old record holding a couple of theme colors. +-} +theme : { active : Color, hover : Color, primary : Color } +theme = + { primary = hex "6496c8" + , active = hex "27496d" + , hover = hex "346392" + } + + +footerButton : List (Attribute msg) -> List (Html msg) -> Html msg +footerButton = + styled button + [ clickableStyle + , border3 (px 1) solid theme.primary + , borderRadius (px 15) + , marginBottom (px 10) + , marginRight (px 10) + , fontSize (pt 10) + , disabled + [ cursor default + , color (hex "ccc") ] ] -inputStyle : Style -inputStyle = - batch - [ padding2 (em 0.3) (px 10) - , borderRadius (px 3) - , lineHeight (em 1.4) - , border3 (px 1) solid (rgba 0 0 0 0.2) - , boxShadow4 zero (px 1) (px 2) (rgba 0 0 0 0.1) +commentArea : List (Attribute msg) -> List (Html msg) -> Html msg +commentArea = + styled textarea + [ inputStyle + , display block + ] + + +userInput : List (Attribute msg) -> List (Html msg) -> Html msg +userInput = + styled input + [ inputStyle + , width (px 162) ] @@ -283,9 +51,248 @@ clickableStyle : Style clickableStyle = batch [ backgroundColor (rgba 0 0 0 0) - , color primaryColor + , color theme.primary , cursor pointer , outline zero - , hover [ borderColor hoverColor, color hoverColor ] - , active [ borderColor activeColor, color activeColor ] + , hover [ borderColor theme.hover, color theme.hover ] + , active [ borderColor theme.active, color theme.active ] + ] + + +inputStyle : Style +inputStyle = + batch + [ padding2 (Css.em 0.3) (px 10) + , borderRadius (px 3) + , lineHeight (Css.em 1.4) + , border3 (px 1) solid (rgba 0 0 0 0.2) + , boxShadow4 zero (px 1) (px 2) (rgba 0 0 0 0.1) ] + + +votes : List Style +votes = + [ color theme.primary + , marginRight (px 10) + ] + + +author : List Style +author = + [ fontWeight bold + , color (hex "555") + ] + + +response : List Style +response = + [ paddingLeft (px 20) + , border3 (px 1) solid (hex "F00") + ] + + +submit : List Style +submit = + [ color (hex "fff") + , textShadow3 (px -2) (px -2) theme.hover + , backgroundColor (hex "ff9664") + , backgroundImage (linearGradient2 toTop (stop theme.primary) (stop theme.hover) []) + , cursor pointer + , borderRadius (px 15) + , border zero + , boxShadow6 inset zero zero zero (px 1) theme.active + , hover [ property "box-shadow" "inset 0 0 0 1px #27496d,0 5px 15px #193047" ] + , active [ property "box-shadow" "inset 0 0 0 1px #27496d,0 5px 30px #193047" ] + , disabled [ color (hex "ccc") ] + , padding2 (px 10) (px 20) + , marginLeft (px 20) + ] + + +control : List Style +control = + [ float right + , display block + , marginBottom (px 5) + ] + + +hidden : List Style +hidden = + [ display none + ] + + +toggle : List Style +toggle = + [ clickableStyle + , border zero + ] + + +blogAuthor : List Style +blogAuthor = + [ backgroundColor (rgba 0 0 0 0.03) ] + + +deleted : List Style +deleted = + [ fontStyle italic + , color (hex "555") + , padding2 zero (px 6) + , marginBottom (px 10) + , display inlineBlock + ] + + +date : List Style +date = + [ color (hex "666") + , fontWeight normal + , textShadow none + ] + + +spacer : List Style +spacer = + [ padding2 zero (px 6) + , color (hex "666") + , fontWeight normal + , textShadow none + ] + + +content : List Style +content = + [ padding (px 0) + , children + [ Css.Foreign.p + [ firstOfType + [ marginTop (Css.em 0.5) ] + , lastOfType + [ marginBottom (Css.em 0.25) ] + ] + ] + , descendants + [ Css.Foreign.img + [ maxWidth (pct 100) + ] + , Css.Foreign.pre + [ overflowX auto + ] + ] + ] + + +comment : List Style +comment = + [ padding (px 0) ] + + +identicon : List Style +identicon = + [ display inlineBlock + , verticalAlign middle + , marginRight (px 10) + ] + + +leftMargin10 : List Style +leftMargin10 = + [ marginLeft (px 10) + ] + + +form : List Style +form = + [ margin3 zero auto (px 10) + , float left + ] + + +user : List Style +user = + [ paddingTop (px 2) + , paddingBottom (px 5) + ] + + +oration : List Style +oration = + [ width (px 597) + ] + + +orationComments : List Style +orationComments = + [ padding zero + , children + [ Css.Foreign.li + [ firstChild + [ border zero + ] + ] + ] + ] + + + +{- + , typeSelector "input[type=\"checkbox\"]" + [ adjacentSiblings + [ label + [ lastChild + [ marginBottom zero ] + , before + [ display inlineBlock + , property "content" "''" + , width (px 20) + , height (px 20) + , border3 (px 1) solid (rgba 0 0 0 0.5) + , position absolute + , left (px 5) + , top zero + , opacity (num 0.6) + , property "-webkit-transition" "all .12s, border-color .08s" + , property "transition" "all .12s, border-color .08s" + ] + , display inlineBlock + , position relative + , paddingLeft (px 30) + , cursor pointer + , property "-webkit-user-select" "none" + , property "-moz-user-select" "none" + , property "-ms-user-select" "none" + ] + ] + , display none + , checked + [ adjacentSiblings + [ label + [ before + [ width (px 10) + , top (px -5) + , left (px 10) + , borderRadius zero + , opacity (int 1) + , borderTopColor transparent + , borderLeftColor transparent + , transform (rotate (deg 45)) + , property "-webkit-transform" "rotate(45deg)" + ] + ] + ] + ] + ] + , Css.Elements.code + [ fontSize (px 14) + , li + [ listStyleType none + , borderTop3 (px 1) solid (rgba 0 0 0 0.2) + , paddingTop (px 5) + ] + ] + + + +-} diff --git a/app/elm/Stylesheets.elm b/app/elm/Stylesheets.elm deleted file mode 100644 index 0757d85e..00000000 --- a/app/elm/Stylesheets.elm +++ /dev/null @@ -1,22 +0,0 @@ -port module Stylesheets exposing (..) - -import Css.File exposing (CssCompilerProgram, CssFileStructure) -import Css.Normalize -import Style - - -{- Stylesheets -} - - -port files : CssFileStructure -> Cmd msg - - -fileStructure : CssFileStructure -fileStructure = - Css.File.toFileStructure - [ ( "main.css", Css.File.compile [ Css.Normalize.css, Style.css ] ) ] - - -main : CssCompilerProgram -main = - Css.File.compiler files fileStructure diff --git a/app/elm/Update.elm b/app/elm/Update.elm index f5a5646f..beefce72 100644 --- a/app/elm/Update.elm +++ b/app/elm/Update.elm @@ -83,8 +83,8 @@ update msg model = Count (Err error) -> { model | debug = toString error } ! [] - Post location -> - { model | post = location } ! [] + Pathname location -> + { model | pathname = location.pathname } ! [] Title value -> { model | title = value } ! [] diff --git a/app/elm/Util.elm b/app/elm/Util.elm index 937434fa..d78abc58 100644 --- a/app/elm/Util.elm +++ b/app/elm/Util.elm @@ -1,6 +1,6 @@ module Util exposing ((=>), delay, nothing, pair, stringToMaybe) -import Html exposing (Html, text) +import Html.Styled exposing (Html, text) import Process import Task import Time exposing (Time) diff --git a/app/elm/View.elm b/app/elm/View.elm index ea446438..ecf6eba6 100644 --- a/app/elm/View.elm +++ b/app/elm/View.elm @@ -2,26 +2,19 @@ module View exposing (view) import Data.Comment exposing (Comment, Responses(Responses), count) import Data.User exposing (Identity, getIdentity) -import Html exposing (..) -import Html.Attributes exposing (autocomplete, checked, cols, defaultValue, disabled, for, href, method, minlength, name, placeholder, rows, type_, value) -import Html.Events exposing (onClick, onInput, onSubmit) +import Html.Styled exposing (..) +import Html.Styled.Attributes exposing (autocomplete, checked, cols, css, defaultValue, disabled, for, href, id, method, minlength, name, placeholder, rows, type_, value) +import Html.Styled.Events exposing (onClick, onInput, onSubmit) import Identicon exposing (identicon) import Markdown exposing (defaultOptions) import Maybe.Extra exposing ((?), isJust, isNothing) import Models exposing (Model, Status(..)) import Msg exposing (Msg(..)) -import Style +import Style exposing (commentArea, footerButton, userInput) import Time.DateTime.Distance exposing (inWords) import Util exposing (nothing) -{- Sync up stylsheets -} - - -{ id, class, classList } = - Style.orationNamespace - - view : Model -> Html Msg view model = let @@ -33,10 +26,10 @@ view model = " comment" ) in - div [ id Style.Oration ] + div [ id "Oration", css Style.oration ] [ h2 [] [ text count ] , commentForm model Nothing - , ul [ id Style.OrationComments ] <| printComments model + , ul [ id "OrationComments", css Style.orationComments ] <| printComments model ] @@ -75,10 +68,10 @@ commentForm model commentId = formID = case model.status of Commenting -> - Style.OrationForm + "OrationForm" _ -> - Style.OrationReplyForm + "OrationReplyForm" formDisable = if isNothing commentId && isJust model.parent then @@ -119,11 +112,11 @@ commentForm model commentId = if formDisable then nothing else - Markdown.toHtmlWith options [ id Style.OrationCommentPreview ] <| + Markdown.toHtmlWith options [ id "OrationCommentPreview" ] <| markdownContent model.comment model.user.preview in - Html.form [ method "post", id formID, class [ Style.Form ], onSubmit submitCmd ] - [ textarea + Html.Styled.form [ method "post", id formID, css Style.form, onSubmit submitCmd ] + [ commentArea [ name "comment" , placeholder "Write a comment here (min 3 characters)." , value textAreaValue @@ -132,19 +125,18 @@ commentForm model commentId = , rows 4 , onInput UpdateComment , disabled formDisable - , class [ Style.Block ] ] [] - , div [ class [ Style.User ] ] - [ span [ class [ Style.Identicon, Style.LeftMargin10 ] ] [ identicon "25px" identity ] - , input [ type_ "text", name "name", placeholder "Name (optional)", defaultValue name_, autocomplete True, onInput (\name -> UpdateName (Just name)) ] [] - , input [ type_ "email", name "email", placeholder "Email (optional)", defaultValue email_, autocomplete True, onInput (\email -> UpdateEmail (Just email)) ] [] - , input [ type_ "url", name "url", placeholder "Website (optional)", defaultValue url_, onInput (\url -> UpdateUrl (Just url)) ] [] + , div [ css Style.user ] + [ span [ css <| Style.identicon ++ Style.leftMargin10 ] [ fromUnstyled <| identicon "25px" identity ] + , userInput [ type_ "text", name "name", placeholder "Name (optional)", defaultValue name_, autocomplete True, onInput (\name -> UpdateName (Just name)) ] [] + , userInput [ type_ "email", name "email", placeholder "Email (optional)", defaultValue email_, autocomplete True, onInput (\email -> UpdateEmail (Just email)) ] [] + , userInput [ type_ "url", name "url", placeholder "Website (optional)", defaultValue url_, onInput (\url -> UpdateUrl (Just url)) ] [] ] - , div [ class [ Style.Control ] ] - [ input [ type_ "checkbox", id Style.OrationPreviewCheck, checked model.user.preview, onClick UpdatePreview ] [] - , label [ for (toString Style.OrationPreviewCheck) ] [ text "Preview" ] - , input [ type_ "submit", class [ Style.Submit ], disabled buttonDisable, value submitText, onClick StoreUser ] [] + , div [ css Style.control ] + [ input [ type_ "checkbox", id "OrationPreviewCheck", checked model.user.preview, onClick UpdatePreview ] [] + , label [ for "OrationPreviewCheck" ] [ text "Preview" ] + , input [ type_ "submit", css Style.submit, disabled buttonDisable, value submitText, onClick StoreUser ] [] ] , preview ] @@ -217,15 +209,15 @@ printComment comment model = headerStyle = if comment.hash == model.blogAuthor && notDeleted then - [ Style.Thread, Style.BlogAuthor ] + [ id commentId, css Style.blogAuthor ] else - [ Style.Thread ] + [ id commentId ] contentStyle = if comment.visible then - [ Style.Comment ] + Style.comment else - [ Style.Hidden ] + Style.hidden visibleButtonText = if comment.visible then @@ -234,35 +226,35 @@ printComment comment model = "[+" ++ toString (count <| List.singleton comment) ++ "]" in if notDeleted then - li [ id commentId, class headerStyle ] - [ span [ class [ Style.Identicon ] ] [ identicon "25px" comment.hash ] + li headerStyle + [ span [ css Style.identicon ] [ fromUnstyled <| identicon "25px" comment.hash ] , printAuthor author - , span [ class [ Style.Spacer ] ] [ text "•" ] - , span [ class [ Style.Date ] ] [ text created ] - , button [ class [ Style.Toggle ], onClick (ToggleCommentVisibility comment.id) ] [ text visibleButtonText ] - , div [ class contentStyle ] - [ Markdown.toHtmlWith options [ class [ Style.Content ] ] comment.text + , span [ css Style.spacer ] [ text "•" ] + , span [ css Style.date ] [ text created ] + , button [ css Style.toggle, onClick (ToggleCommentVisibility comment.id) ] [ text visibleButtonText ] + , div [ css contentStyle ] + [ Markdown.toHtmlWith options [ css Style.content ] comment.text , printFooter model.status model.user.identity comment , replyForm comment.id model , printResponses comment.children model ] ] else - li [ id commentId, class headerStyle ] - [ span [ class [ Style.Deleted ] ] [ text "Deleted comment" ] - , span [ class [ Style.Spacer ] ] [ text "•" ] - , span [ class [ Style.Date ] ] [ text created ] - , button [ class [ Style.Toggle ], onClick (ToggleCommentVisibility comment.id) ] [ text visibleButtonText ] - , div [ class contentStyle ] [ printResponses comment.children model ] + li headerStyle + [ span [ css Style.deleted ] [ text "Deleted comment" ] + , span [ css Style.spacer ] [ text "•" ] + , span [ css Style.date ] [ text created ] + , button [ css Style.toggle, onClick (ToggleCommentVisibility comment.id) ] [ text visibleButtonText ] + , div [ css contentStyle ] [ printResponses comment.children model ] ] printAuthor : String -> Html Msg printAuthor author = if String.startsWith "http://" author || String.startsWith "https://" author then - a [ class [ Style.Author ], href author ] [ text author ] + a [ css Style.author, href author ] [ text author ] else - span [ class [ Style.Author ] ] [ text author ] + span [ css Style.author ] [ text author ] printFooter : Status -> Identity -> Comment -> Html Msg @@ -316,13 +308,13 @@ printFooter status identity comment = edit = if comment.editable then - button [ onClick (CommentEdit comment.id), disabled editDisabled ] [ text editText ] + footerButton [ onClick (CommentEdit comment.id), disabled editDisabled ] [ text editText ] else nothing delete = if comment.editable then - button [ onClick (CommentDelete comment.id), disabled deleteDisabled ] [ text "delete" ] + footerButton [ onClick (CommentDelete comment.id), disabled deleteDisabled ] [ text "delete" ] else nothing @@ -332,13 +324,13 @@ printFooter status identity comment = else " " ++ toString comment.votes in - span [ class [ Style.Footer ] ] - [ span [ class [ Style.Votes ] ] - [ button [ onClick (CommentLike comment.id), disabled votingDisabled ] [ text "\xF106" ] - , button [ onClick (CommentDislike comment.id), disabled votingDisabled ] [ text "\xF107" ] + span [] + [ span [ css Style.votes ] + [ footerButton [ onClick (CommentLike comment.id), disabled votingDisabled ] [ text "\xF106" ] + , footerButton [ onClick (CommentDislike comment.id), disabled votingDisabled ] [ text "\xF107" ] , text votes ] - , button [ onClick (CommentReply comment.id), disabled replyDisabled ] [ text replyText ] + , footerButton [ onClick (CommentReply comment.id), disabled replyDisabled ] [ text replyText ] , edit , delete ] diff --git a/app/elm/elm-package.json b/app/elm/elm-package.json index 2fa5be5c..5f20bb12 100644 --- a/app/elm/elm-package.json +++ b/app/elm/elm-package.json @@ -21,9 +21,7 @@ "ktonon/elm-crypto": "1.1.0 <= v < 2.0.0", "lukewestby/elm-http-builder": "5.1.0 <= v < 6.0.0", "pukkamustard/elm-identicon": "3.0.0 <= v < 4.0.0", - "rtfeldman/elm-css": "11.2.0 <= v < 12.0.0", - "rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0", - "scottcorgan/elm-css-normalize": "1.1.9 <= v < 2.0.0" + "rtfeldman/elm-css": "13.0.1 <= v < 14.0.0" }, "elm-version": "0.18.0 <= v < 0.19.0" } diff --git a/app/package.json b/app/package.json index 353735d5..adc18f82 100644 --- a/app/package.json +++ b/app/package.json @@ -10,17 +10,11 @@ "license": "MIT", "devDependencies": { "auto-reload-brunch": "^2.7.1", - "brunch": "^2.10.9", + "brunch": "^2.10.12", "babel-brunch": "^6.1.1", - "clean-css-brunch": "^2.10.0", - "css-brunch": "^2.10.0", - "elm": "^0.18.0", - "elm-brunch": "^0.9.0", - "cssnano-brunch": "^1.1.8", - "uglify-js-brunch": "^2.10.0" + "elm-brunch": "^0.9.0" }, "dependencies": { - "elm-css-brunch": "^0.2.0", "markdown-it": "^8.4.0", "markdown-it-katex": "^2.0.3" }