Commit ebc54b89 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

Simplify sprite build

parent 144e279d
Pipeline #9591 passed with stage
in 2 minutes and 33 seconds
.icon {
background-image: url('../images/sprite.png');
background-image: url('../images/sprite.svg');
background-repeat: no-repeat;
background-size: 48px 2208px;
height: 48px;
width: 48px;
}
.icon-cragr {
background-position: -0px -0px;
width: 46px;
height: 46px;
}
.icon-afer {
background-position: -0px -46px;
width: 46px;
height: 46px;
}
.icon-amazonstorecard {
background-position: -0px -92px;
width: 46px;
height: 46px;
}
.icon-americanexpress {
background-position: -0px -138px;
width: 46px;
height: 46px;
}
.icon-amundi {
background-position: -0px -184px;
width: 46px;
height: 46px;
}
.icon-apivie {
background-position: -0px -230px;
width: 46px;
height: 46px;
}
.icon-axabanque {
background-position: -0px -276px;
width: 46px;
height: 46px;
}
.icon-banqueaccord {
background-position: -0px -322px;
width: 46px;
height: 46px;
}
.icon-banquepopulaire {
background-position: -0px -368px;
width: 46px;
height: 46px;
}
.icon-barclays {
background-position: -0px -414px;
width: 46px;
height: 46px;
}
.icon-bforbank {
background-position: -0px -460px;
width: 46px;
height: 46px;
}
.icon-bnporc {
background-position: -0px -506px;
width: 46px;
height: 46px;
}
.icon-boursorama {
background-position: -0px -552px;
width: 46px;
height: 46px;
}
.icon-bp {
background-position: -0px -598px;
width: 46px;
height: 46px;
}
.icon-bred {
background-position: -0px -644px;
width: 46px;
height: 46px;
}
.icon-caels {
background-position: -0px -690px;
width: 46px;
height: 46px;
}
.icon-caissedepargne {
background-position: -0px -736px;
width: 46px;
height: 46px;
}
.icon-carrefourbanque {
background-position: -0px -782px;
width: 46px;
height: 46px;
}
.icon-cic {
background-position: -0px -828px;
width: 46px;
height: 46px;
}
.icon-citelis {
background-position: -0px -874px;
width: 46px;
height: 46px;
}
.icon-citibank {
background-position: -0px -920px;
width: 46px;
height: 46px;
}
.icon-cmb {
background-position: -0px -966px;
width: 46px;
height: 46px;
}
.icon-cmso {
background-position: -0px -1012px;
width: 46px;
height: 46px;
}
.icon-alloresto {
background-position: -0px -1058px;
width: 46px;
height: 46px;
}
.icon-creditcooperatif {
background-position: -0px -1104px;
width: 46px;
height: 46px;
}
.icon-creditdunord {
background-position: -0px -1150px;
width: 46px;
height: 46px;
}
.icon-creditdunordpee {
background-position: -0px -1196px;
width: 46px;
height: 46px;
}
.icon-creditmutuel {
background-position: -0px -1242px;
width: 46px;
height: 46px;
}
.icon-delubac {
background-position: -0px -1288px;
width: 46px;
height: 46px;
}
.icon-fakebank1 {
background-position: -0px -1334px;
width: 46px;
height: 46px;
}
.icon-fakebank2 {
background-position: -0px -1380px;
width: 46px;
height: 46px;
}
.icon-fortuneo {
background-position: -0px -1426px;
width: 46px;
height: 46px;
}
.icon-ganassurances {
background-position: -0px -1472px;
width: 46px;
height: 46px;
}
.icon-groupamaes {
background-position: -0px -1518px;
width: 46px;
height: 46px;
}
.icon-hsbc {
background-position: -0px -1564px;
width: 46px;
height: 46px;
}
.icon-ing {
background-position: -0px -1610px;
width: 46px;
height: 46px;
}
.icon-kiwibank {
background-position: -0px -1656px;
width: 46px;
height: 46px;
}
.icon-lcl {
background-position: -0px -1702px;
width: 46px;
height: 46px;
}
.icon-n26 {
background-position: -0px -1748px;
width: 46px;
height: 46px;
}
.icon-oney {
background-position: -0px -1794px;
width: 46px;
height: 46px;
}
.icon-paypal {
background-position: -0px -1840px;
width: 46px;
height: 46px;
}
.icon-s2e {
background-position: -0px -1886px;
width: 46px;
height: 46px;
}
.icon-societegenerale {
background-position: -0px -1932px;
width: 46px;
height: 46px;
}
.icon-vicseccard {
background-position: -0px -1978px;
width: 46px;
height: 46px;
}
.icon-wellsfargo {
background-position: -0px -2024px;
width: 46px;
height: 46px;
}
.icon-yomoni {
background-position: -0px -2070px;
width: 46px;
height: 46px;
}
.icon-afer { background-position: 0 -0px;}
.icon-alloresto { background-position: 0 -48px;}
.icon-amazonstorecard { background-position: 0 -96px;}
.icon-americanexpress { background-position: 0 -144px;}
.icon-amundi { background-position: 0 -192px;}
.icon-apivie { background-position: 0 -240px;}
.icon-axabanque { background-position: 0 -288px;}
.icon-banqueaccord { background-position: 0 -336px;}
.icon-banquepopulaire { background-position: 0 -384px;}
.icon-barclays { background-position: 0 -432px;}
.icon-bforbank { background-position: 0 -480px;}
.icon-bnporc { background-position: 0 -528px;}
.icon-boursorama { background-position: 0 -576px;}
.icon-bp { background-position: 0 -624px;}
.icon-bred { background-position: 0 -672px;}
.icon-caels { background-position: 0 -720px;}
.icon-caissedepargne { background-position: 0 -768px;}
.icon-carrefourbanque { background-position: 0 -816px;}
.icon-cic { background-position: 0 -864px;}
.icon-citelis { background-position: 0 -912px;}
.icon-citibank { background-position: 0 -960px;}
.icon-cmb { background-position: 0 -1008px;}
.icon-cmso { background-position: 0 -1056px;}
.icon-cragr { background-position: 0 -1104px;}
.icon-creditcooperatif { background-position: 0 -1152px;}
.icon-creditdunordpee { background-position: 0 -1200px;}
.icon-creditdunord { background-position: 0 -1248px;}
.icon-creditmutuel { background-position: 0 -1296px;}
.icon-delubac { background-position: 0 -1344px;}
.icon-fakebank1 { background-position: 0 -1392px;}
.icon-fakebank2 { background-position: 0 -1440px;}
.icon-fortuneo { background-position: 0 -1488px;}
.icon-ganassurances { background-position: 0 -1536px;}
.icon-groupamaes { background-position: 0 -1584px;}
.icon-hsbc { background-position: 0 -1632px;}
.icon-ing { background-position: 0 -1680px;}
.icon-kiwibank { background-position: 0 -1728px;}
.icon-lcl { background-position: 0 -1776px;}
.icon-n26 { background-position: 0 -1824px;}
.icon-oney { background-position: 0 -1872px;}
.icon-paypal { background-position: 0 -1920px;}
.icon-s2e { background-position: 0 -1968px;}
.icon-societegenerale { background-position: 0 -2016px;}
.icon-vicseccard { background-position: 0 -2064px;}
.icon-wellsfargo { background-position: 0 -2112px;}
.icon-yomoni { background-position: 0 -2160px;}
......@@ -47,7 +47,6 @@
"redux-thunk": "2.1.0",
"reselect": "2.5.4",
"should": "11.1.1",
"sprity-cli": "1.0.1",
"updeep": "1.0.0",
"watchify": "3.7.0"
},
......@@ -76,10 +75,10 @@
"description": "Une alerte liée à vos comptes bancaires."
},
"BankCategory": {
"description": "Categories des operations bancaires."
"description": "Catégories des operations bancaires."
},
"send mail to user": {
"description": "A votre demande, des rapports journaliers, hebdomadaires ou mensuels peuvent vous être envoyés par email."
"description": "À votre demande, des rapports journaliers, hebdomadaires ou mensuels peuvent vous être envoyés par email."
},
"Notification": {
"description": "Des notifications sont créées lorsque des alertes sont mises en place dans l'application."
......
......@@ -6,6 +6,10 @@ echo "Copying static files..."
mkdir -p ./build/client
cp -r ./static/* ./build/client
echo "Creating banks icons sprite..."
mkdir -p ./build/client/images
./scripts/sprite.sh ./build/client/images/sprite.svg ./client/css/sprite.css
echo "Concatening and copying CSS..."
mkdir -p ./build/client/css
./scripts/build-css.sh
......
......@@ -11,7 +11,7 @@ mkdir -p ./build/server/shared
(./node_modules/onchange/cli.js './static/**/*' -v -- cp -r ./static/* ./build/client) &
# CSS
(./node_modules/onchange/cli.js './static/images/banks/*.png' -v -- node ./node_modules/sprity-cli/index.js create './static/images/' './static/images/banks/*.png' -s '../../client/css/sprite.css' --margin 1) &
(./node_modules/onchange/cli.js './static/images/banks/*.png' -v -- ./scripts/sprite.sh ./build/client/images/sprite.svg ./client/css/sprite.css) &
(./node_modules/onchange/cli.js './client/css/**/*.css' -v -- ./scripts/build-css.sh) &
# Vendor JS
......
#!/bin/bash
readonly SVG_FILE_OUTPUT=$1
readonly CSS_FILE_OUTPUT=$2
readonly IMAGE_SIZE=48
readonly IMAGES_DIR=./static/images/banks
svg="<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n"
css=""
y=0
for icon in "$IMAGES_DIR"/*
do
filename=$(basename "$icon")
filename="${filename%.*}"
content=$(base64 -w 0 "$icon")
svg="$svg\t<image x=\"0\" y=\"$y\" width=\"$IMAGE_SIZE\" height=\"$IMAGE_SIZE\" xlink:href=\"data:image/png;base64,$content\" />\n"
svg="$svg\t<view id=\"$filename\" viewBox=\"0 $y $IMAGE_SIZE $IMAGE_SIZE\" overflow=\"hidden\" />\n\n"
css="$css.icon-$filename { background-position: 0 -${y}px;}\n"
y=$(( y + $IMAGE_SIZE ))
done
svg="$svg\\n</svg>"
css=".icon {
background-image: url('../images/sprite.svg');
background-repeat: no-repeat;
background-size: ${IMAGE_SIZE}px ${y}px;
height: ${IMAGE_SIZE}px;
width: ${IMAGE_SIZE}px;
}
$css"
echo -e "$svg" > "$SVG_FILE_OUTPUT"
echo -e "$css" > "$CSS_FILE_OUTPUT"
exit 0
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment