From 5855e3d2b572b648d1f0251c8fd0425f98abe8df Mon Sep 17 00:00:00 2001 From: Saivann Date: Mon, 8 Apr 2013 15:06:47 -0400 Subject: [PATCH] Adapt choose-your-wallet page to work with dynamic height This fixes all issues related to translations that overflow fixed height in many cases Remove some steps in the README that are not necessary anymore Fix two display bugs in IE7 Fix one display bug in IE9 Optimize images with optipng --- README.md | 2 +- _less/screen.less | 81 ++++++----- en/choose-your-wallet.html | 216 ++++++++++++++++++---------- fr/choisir-votre-porte-monnaie.html | 212 ++++++++++++++++++--------- img/bubble.png | Bin 4506 -> 0 bytes img/bubble.svg | 19 ++- img/bubblebottom.png | Bin 0 -> 2925 bytes img/bubblebottom.svg | 65 +++++++++ img/bubblemiddle.png | Bin 0 -> 297 bytes img/bubblemiddle.svg | 65 +++++++++ img/bubbletop.png | Bin 0 -> 976 bytes img/bubbletop.svg | 65 +++++++++ img/bubblewarn.png | Bin 4555 -> 0 bytes img/bubblewarn.svg | 19 ++- img/bubblewarnbottom.png | Bin 0 -> 2954 bytes img/bubblewarnbottom.svg | 65 +++++++++ img/bubblewarnmiddle.png | Bin 0 -> 301 bytes img/bubblewarnmiddle.svg | 65 +++++++++ img/bubblewarntop.png | Bin 0 -> 1014 bytes img/bubblewarntop.svg | 65 +++++++++ img/clients/lo-bips.png | Bin 1602 -> 1598 bytes img/clients/lo-bitcoin.png | Bin 5492 -> 5480 bytes img/clients/lo-bitcoinwallet.png | Bin 6851 -> 6633 bytes img/clients/lo-blockchain.png | Bin 2575 -> 2495 bytes img/clients/lo-electrum.png | Bin 4380 -> 4000 bytes img/clients/lo-paytunia.png | Bin 3429 -> 2893 bytes js/main.js | 2 +- 27 files changed, 745 insertions(+), 196 deletions(-) delete mode 100644 img/bubble.png create mode 100644 img/bubblebottom.png create mode 100644 img/bubblebottom.svg create mode 100644 img/bubblemiddle.png create mode 100644 img/bubblemiddle.svg create mode 100644 img/bubbletop.png create mode 100644 img/bubbletop.svg delete mode 100644 img/bubblewarn.png create mode 100644 img/bubblewarnbottom.png create mode 100644 img/bubblewarnbottom.svg create mode 100644 img/bubblewarnmiddle.png create mode 100644 img/bubblewarnmiddle.svg create mode 100644 img/bubblewarntop.png create mode 100644 img/bubblewarntop.svg diff --git a/README.md b/README.md index a7a5f4ae..b9e818a6 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Installing dependencies on older Ubuntu and Debian distributions 5. Images, Update the few images that contain text with any vector image editing software like Inkscape. 6. Languages, Make sure that the languages are listed in alphabetical order in _config.yml 7. Post, Remove sections that use _posts such as "version-history" and "news". Those are not meant to be translated yet. -8. Preview, Check that fixed size texts don't overflow. For example, each wallet description, right side buttons and some titles have height or width restrictions. You can preview your work without building the website. Just visit the existing english page, open the javascript console of your browser (CTRL + SHIFT + J on Google Chrome) and copy the following command to make the page editable : document.body.contentEditable=true . This will allow you to edit and preview the page in your browser like a document. +8. Preview, Check that texts that are limited in size display nicely. For example, right side buttons and some titles have height or width restrictions. You can preview your work without building the website. Just visit the existing english page, open the javascript console of your browser (CTRL + SHIFT + J on Google Chrome) and copy the following command to make the page editable : document.body.contentEditable=true . This will allow you to edit and preview the page in your browser like a document. ### Update diff --git a/_less/screen.less b/_less/screen.less index 6180a33d..825153a2 100644 --- a/_less/screen.less +++ b/_less/screen.less @@ -451,6 +451,17 @@ li{ .previewrow>h2{ font-size:115%; } +.previewrow>div{ + display:inline-block; + zoom:1;*display:inline;/*IE7 support*/ + position:relative; + margin-right:17px; + margin-bottom:12px; + vertical-align:top; +} +.previewrow>div.last{ + margin-right:0px; +} .previewrow>div>a>img{ display:block; margin:auto; @@ -477,64 +488,70 @@ li{ position:absolute; left:-110px; right:-110px; - padding:0px 30px; - margin-top:-270px; - background:url(/img/bubble.svg) bottom center no-repeat; + bottom:100px; + padding:0px; z-index:1000; overflow:hidden; } -.previewrow>div>div>h2{ - margin-top:20px; -} .previewrow>div:hover>div{ opacity:1; width:auto; - height:280px; + height:auto; } -.previewrow>div{ - display:inline-block; - zoom:1;*display:inline;/*IE7 support*/ - position:relative; - margin-right:18px; - margin-bottom:12px; - vertical-align:top; +.previewrow>div>div>div:first-child{ + background:url(/img/bubbletop.svg) bottom center no-repeat; + height:10px; } -.previewrow>div.last{ - margin-right:0px; +.previewrow>div>div>div:first-child+div{ + background:url(/img/bubblemiddle.svg) bottom center repeat-y; + padding:0px 30px; } -.previewrow>div>div>span{ +.previewrow>div>div>div:first-child+div+div{ + background:url(/img/bubblebottom.svg) bottom center no-repeat; + height:64px; +} +.previewrow>div>div>div>span{ position:absolute; top:24px; right:30px; } -.previewrow>div>div>span>img{ +.previewrow>div>div>div>h2{ + margin:0px; + padding-top:10px; +} +.previewrow>div>div>div>span>img{ margin-left:4px; } -.previewrow>div>div>h2:first-child+span+p{ +.previewrow>div>div>div>h2:first-child+span+p{ font-size:95%; - line-height: 1.2em; + line-height:1.2em; + margin:0px; + padding:10px 0px; } -.previewrow>div>div>h2:first-child+span+p+p{ - text-align:center; - position:absolute; - width:290px; - top:190px; - left:0px; +.previewrow>div>div>div>h2:first-child+span+p+p{ + text-align: center; + margin:0px; + padding:0px; + position:relative; + bottom:-10px; } .previewrow>div>div a,.previewrow>div>div a:link,.previewrow>div>div a:visited,.previewrow>div>div a:active{ font-weight:bold; text-decoration:none; font-size:125%; } +.previewrow .walletwarning>div:first-child{ + background:url(/img/bubblewarntop.svg) bottom center no-repeat; +} +.previewrow .walletwarning>div:first-child+div{ + background:url(/img/bubblewarnmiddle.svg) bottom center repeat-y; +} +.previewrow .walletwarning>div:first-child+div+div{ + background:url(/img/bubblewarnbottom.svg) bottom center no-repeat; +} .previewrow .walletwarning a,.previewrow .walletwarning a:link,.previewrow .walletwarning a:visited,.previewrow .walletwarning a:active{ color:#b95357; } -.previewrow .walletwarning{ - background:url(/img/bubblewarn.svg) bottom center no-repeat; -} -.previewrow .walletnormal{ - background:url(/img/bubble.svg) bottom center no-repeat; -} .versiontext{ text-align:left; diff --git a/en/choose-your-wallet.html b/en/choose-your-wallet.html index 966e8925..d2879686 100644 --- a/en/choose-your-wallet.html +++ b/en/choose-your-wallet.html @@ -17,108 +17,160 @@ title: Choose your wallet - Bitcoin

NetworkDo you have a computer that you keep switched on all the time, that's connected to the internet? You can help the community by simply running the original Bitcoin client on it. The original client is more resource intensive and will take a complete day to synchronize. After that your computer will contribute to the network by checking and relaying transactions.

+ +
+ +
+

Software walletsSoftware wallets

+

Software wallets are installed on your computer. They give you complete control of your wallet. You are responsible for doing backups and protecting your money.

+
+
+

mobile walletsMobile wallets

+

Mobile wallets allow you to bring Bitcoin with you in your pocket. You can exchange coins easily and pay in physical stores by scanning a QR code or using NFC "tap to pay".

+
+
+

web walletsWeb wallets

+

Web wallets allow you to use Bitcoin anywhere with less effort to protect your wallet. However, you must choose your web wallet service with care as they host your bitcoins.

+
+ +
+
-

Software walletsSoftware wallets

-

Software wallets are installed on your computer. They give you complete control of your wallet. You are responsible for doing backups and protecting your money.

-

Bitcoin-Qt

- WindowsLinuxMac OS X -

Bitcoin-Qt is the original Bitcoin client and it builds the backbone of the network. It offers the highest levels of security, privacy and stability. However it has fewer features and it takes a lot of space and memory.

-

Download

+
+
+

Bitcoin-Qt

+ WindowsLinuxMac OS X +

Bitcoin-Qt is the original Bitcoin client and it builds the backbone of the network. It offers the highest levels of security, privacy and stability. However it has fewer features and it takes a lot of space and memory.

+

Download

+
+
bitcoin-qtBitcoin-Qt
-

Multibit

- WindowsLinuxMac OS X -

Multibit is a lightweight client that focuses on being fast and easy to use. It synchronizes with the network and is ready to use in minutes. Multibit also supports many languages. It is a good choice for non-technical users.

-

Visit website

+
+
+

Multibit

+ WindowsLinuxMac OS X +

Multibit is a lightweight client that focuses on being fast and easy to use. It synchronizes with the network and is ready to use in minutes. Multibit also supports many languages. It is a good choice for non-technical users.

+

Visit website

+
+
multibitMultibit
-

Armory

- WindowsLinux -

Armory is an advanced Bitcoin client that runs on top of Bitcoin-Qt. Expanding its features for Bitcoin power users. It offers many backup and encryption features, and it allows secure cold-storage on offline computers.

-

Visit website

+
+
+

Armory

+ WindowsLinux +

Armory is an advanced Bitcoin client that runs on top of Bitcoin-Qt. Expanding its features for Bitcoin power users. It offers many backup and encryption features, and it allows secure cold-storage on offline computers.

+

Visit website

+
+
armoryArmory
-

Electrum

- WindowsLinuxMac OS XAndroid -

Electrum's focus is speed and simplicity, with low resource usage. It uses remote servers that handle the most complicated parts of the Bitcoin system, and it allows you to recover your wallet from a secret phrase.

-

Visit website

+
+
+

Electrum

+ WindowsLinuxMac OS XAndroid +

Electrum's focus is speed and simplicity, with low resource usage. It uses remote servers that handle the most complicated parts of the Bitcoin system, and it allows you to recover your wallet from a secret phrase.

+

Visit website

+
+
electrumElectrum
-

mobile walletsMobile wallets

-

Mobile wallets allow you to bring Bitcoin with you in your pocket. You can exchange coins easily and pay in physical stores by scanning a QR code or using NFC "tap to pay".

-

Bitcoin Wallet

- AndroidBlackBerry OS -

Bitcoin Wallet is a lightweight mobile client for Android and BlackBerry OS. This client does not need to be associated with any online service to work. It is compatible with QR code scanning and NFC.

-

Visit website

+
+
+

Bitcoin Wallet

+ AndroidBlackBerry OS +

Bitcoin Wallet is a lightweight mobile client for Android and BlackBerry OS. This client does not need to be associated with any online service to work. It is compatible with QR code scanning and NFC.

+

Visit website

+
+
bitcoin walletBitcoin
Wallet
-

Be careful

- -

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

-

OK, I understand

+
+
+

Be careful

+ +

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

+

OK, I understand

+
+
hidden
-

Be careful

- -

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

-

OK, I understand

+
+
+

Be careful

+ +

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

+

OK, I understand

+
+
hidden
-

web walletsWeb wallets

-

Web wallets allow you to use Bitcoin anywhere with less effort to protect your wallet. However, you must choose your web wallet service with care as they host your bitcoins.

-

Be careful

- -

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

-

OK, I understand

+
+
+

Be careful

+ +

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

+

OK, I understand

+
+
hidden
-

Be careful

- -

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

-

OK, I understand

+
+
+

Be careful

+ +

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

+

OK, I understand

+
+
hidden
-

Be careful

- -

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

-

OK, I understand

+
+
+

Be careful

+ +

Web wallets host your bitcoins. That means it is possible for them to lose your bitcoins following any incident on their side. As of today, no web wallet service provide enough insurance to be used to store value like a bank.

+

OK, I understand

+
+
hidden
@@ -127,49 +179,69 @@ title: Choose your wallet - Bitcoin
.
-
+