From 5e83d093ec95096d149633fcd6d0ad79d75987ec Mon Sep 17 00:00:00 2001 From: Grant Leadbetter Date: Sat, 9 Jul 2016 23:29:30 +0100 Subject: [PATCH 01/16] Modified text in json files to offer more support for students on c9.io and help them avoid a "Not enough disk space" error --- .../03-back-end-development-certification/mongodb.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed/challenges/03-back-end-development-certification/mongodb.json b/seed/challenges/03-back-end-development-certification/mongodb.json index 453b310605..6a7e1ce1fa 100644 --- a/seed/challenges/03-back-end-development-certification/mongodb.json +++ b/seed/challenges/03-back-end-development-certification/mongodb.json @@ -20,12 +20,12 @@ "Install MongoDB with this command: sudo apt-get install mongodb-org", "Set up your mongod alias by following the directions at https://community.c9.io/t/setting-up-mongodb/1717.", "Now start the tutorial by running learnyoumongo.", - "Whenever you run a command that includes mongod on c9.io, use ./mongod instead.", + "Whenever you run a command that includes mongod on c9.io, use ./mongod instead. Together with the commands used in Step 11, this adds additional parameters to the mongod command to allow MongoDB to run in the C9 environment.", "Note that you can resize the c9.io's windows by dragging their borders.", "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: cd ~/workspace.", "You can view this Node School module's source code on GitHub at https://github.com/evanlucas/learnyoumongo.", "Complete \"Mongod\"", - "Complete \"Connect\"", + "Complete \"Connect\" Note: Use the command mongod --port 27017 in place of mongod --port 27017 --dbpath=./data to avoid a duplicate parameter error. --dbpath=./data is already included in the ./mongod command.", "Complete \"Find\"", "Complete \"Find Project\"", "Complete \"Insert\"", From 75371198784733d903a913d4140b7aed8ff8d847 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Fortier?= Date: Wed, 20 Jul 2016 14:05:38 +0000 Subject: [PATCH 02/16] added translation to pig latin challenge --- .../intermediate-bonfires.json | 1 + 1 file changed, 1 insertion(+) diff --git a/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json b/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json index f363cf94eb..a9f583f6f8 100644 --- a/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json +++ b/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json @@ -322,6 +322,7 @@ "Traduis la phrase donnée en pig latin (verlan anglais)", "Le Pig Latin prend la ou les première(s) consonne(s) d'un mot en anglais et les mets à la fin du mot accompagné par le suffixe \"ay\".", "Si un mot commence par une voyelle ajoute \"way\" à la fin du mot.", + "Les chaînes de caractères entrées sont garanties d'être des mots anglais, en lettres minuscules.", "N'oublie pas d'utiliser Lire-Chercher-Demander si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code." ] }, From bb4e0f5eb6d6be3be12e03c20a12563671dc6e80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Fortier?= Date: Tue, 19 Jul 2016 18:53:26 -0400 Subject: [PATCH 03/16] Translated challenge 10 to 18 --- .../html5-and-css.json | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 5e89efbdee..3cd26b2bd0 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -643,6 +643,18 @@ "Внутри вашего элемента style, замените селектор h2 на .red-text и измените значение цвета с blue на red.", "Присвойте вашему элементу h2 атрибут class со значением 'red-text'." ], + "titleFR": "Utiliser les classes CSS pour styler un élément", + "descriptionFR": [ + "Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.", + "Voici un exemple de déclaration de classe CSS :", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Remarquez que nous avons créer une classe CSS nommée blue-text à l'intérieur de notre balise <style>.", + "Vous pouvez appliquer une classe à un élément HTML comme ceci :", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Prenez note que que dans votre élément CSS style, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.", + "À l'intérieur de votre élément style, changez le sélecteur du h2 pour .red-text et changez la couleur, passant de blue à red.", + "Donnez à votre élément h2 l'attribut de classe la valeur de red-text." + ], "title": "Use a CSS Class to Style an Element", "description": [ "Classes are reusable styles that can be added to HTML elements.", @@ -718,6 +730,15 @@ "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Примените класс red-text к вашим элементам h2 и p." ], + "titleFR": "Stylez plusieurs éléments avec une classe CSS", + "descriptionFR": [ + "Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant class=\"votre-classe-ici\" à l'intérieur de la balise ouvrante correspondante.", + "Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :", + "
.blue-text {
  color: blue;
}
", + "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Appliquez la classe red-text à vos éléments h2 et p." + ], "title": "Style Multiple Elements with a CSS Class", "description": [ "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", @@ -785,6 +806,15 @@ "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания.", "Также, пожалуйста, не добавляйте атрибут класс к вашему новому элементу p." ], + "titleFR": "Changez la taille de police d'un élément", + "descriptionFR": [ + "La taille de police est contrôlée par la propriété CSS font-size, comme ceci :", + "
h1 {
  font-size: 30px;
}
", + "Créez un second élément p après l'élément p existant avec le texte kitty ipsum suivant : Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "À l'intérieur de la même balise <style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px).", + "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi.", + "Également, veuillez ne pas ajouter d'attributs de classe à votre nouvel élément p." + ], "title": "Change the Font Size of an Element", "description": [ "Font size is controlled by the font-size CSS property, like this:", @@ -850,6 +880,13 @@ "
h2 {
  font-family: Sans-serif;
}
", "Присвойте шрифт Monospace всем вашим элементам p." ], + "titleFR": "Paramétrer la famille de police d'un élément", + "descriptionFR": [ + "Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family.", + "Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-serif, vous devez utiliser le CSS suivant :", + "
h2 {
  font-family: Sans-serif;
}
", + "Faites en sorte que tous vos éléments p aient la police Monospace." + ], "title": "Set the Font Family of an Element", "description": [ "You can set an element's font by using the font-family property.", @@ -914,6 +951,14 @@ "Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.", "Примените свойство font-family со значением Lobster к вашему элементу h2." ], + "titleFR": "Importer une police de Google", + "descriptionFR": [ + "Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).", + "Premièrement, vous devrez faire un appel vers Google pour prendre la police Lobster et la charger dans votre HTML.", + "Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :", + "Maintenant vous pouvez paramétrer Lobster comme valeur de police de votre élément h2.", + "Appliquer la valeur Lobster à la font-family de votre élément h2." + ], "title": "Import a Google Font", "description": [ "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", @@ -985,6 +1030,14 @@ "
p {
  font-family: Helvetica, Sans-Serif;
}
", "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace." ], + "titleFR": "Spécifier comment vos polices devraient dégrader", + "descriptionFR": [ + "Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend Monospace, Serif et Sans-Serif.", + "Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.", + "Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Maintenant, commenter votre appel vers les polices de Google, pour que la police Lobster ne soit pas disponible. Regardez comment la police se dégrade vers Monospace." + ], "title": "Specify How Fonts Should Degrade", "description": [ "There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif", @@ -1061,6 +1114,16 @@ "Попробуйте добавить изображение используя следующую ссылку:", "https://bit.ly/fcc-relaxing-cat" ], + "titleFR": "Ajouter des images à votre site Web", + "descriptionFR": [ + "Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.", + "Un exemple de cette procédure serait :", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Note that in most cases, img elements are self-closing.", + "Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.", + "Essayez avec cette image :", + "https://bit.ly/fcc-relaxing-cat" + ], "title": "Add Images to your Website", "description": [ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", @@ -1137,6 +1200,14 @@ "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." ], + "titleFR": "Redimensionner vos images", + "descriptionFR": [ + "Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.", + "Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.", + "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi." + ], "title": "Size your Images", "description": [ "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", @@ -1219,6 +1290,15 @@ "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", "<img class=\"class1 class2\">" ], + "titleFR": "Ajouter des bordures autour de vos éléments", + "descriptionFR": [ + "Les bordures CSS ont des propriétés comme style, color et width", + "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.", + "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :", + "<img class=\"class1 class2\">" + ], "title": "Add Borders Around your Elements", "description": [ "CSS borders have properties like style, color and width", From a75590be7bc48c964438862db9e5af79a802776e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20Fortier?= Date: Wed, 20 Jul 2016 18:21:05 +0000 Subject: [PATCH 04/16] Fixed translation --- .../basic-javascript.json | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/seed/challenges/01-front-end-development-certification/basic-javascript.json b/seed/challenges/01-front-end-development-certification/basic-javascript.json index 68f5cd2f35..f0f8183fe6 100644 --- a/seed/challenges/01-front-end-development-certification/basic-javascript.json +++ b/seed/challenges/01-front-end-development-certification/basic-javascript.json @@ -40,7 +40,20 @@ "El comentario de barra-estrella-estrella-barra, comentará todo lo que haya entre los caracteres /* y */:", "/* Este es también un comentario */", "Trata de crear uno de cada uno." - ] + ], + "titleFr" : "Commentez votre code JavaScript", + "descriptionFr" : [ + "Les commentaires sont des lignes de code que Javascript va intentionnellement ignorer. Les commentaires sont un bon moyen de laisser des notes à votre intention ou pour d'autres personnes qui devront comprendre ce que fait votre code.", + "Il y a deux façons d'écrire des commentaires en JavaScript.", + "Utiliser // indiquera à JavaScript d'ignorer le reste du texte sur cette même ligne:", + "// Voici un commentaire sur une ligne.", + "Vous pouvez commenter plusieurs lignes en commençant par /* et en finissant par */:", + "/*Voici un commentaire
sur plusieurs lignes */", + "Conseils", + "Lorsque vous écrivez votre code, vous devriez ajouter régulièrement des commentaires pour clarifier l'objectif de certaines parties de votre code. De bons commentaires peuvent aider les autres et vous-même à mieux comprendre votre code.", + "

Instructions

", + "Essayez de créer un commentaire de chaque type." + ] }, { "id": "bd7123c9c443eddfaeb5bdef", @@ -83,7 +96,21 @@ "Te darás cuenta que en myName, no usamos un espacio, y que la \" N\"se escribe con mayúscula. Las variables en JavaScript se escriben con capitalización camello (camel case). Un ejemplo de capitalización camello: capitalizacionCamello.", "Ahora, utiliza la palabra clave var para crear una variable llamada myName. Establecele como valor tu nombre, entre comillas dobles. ", "Mira el ejemplo con ourName si te quedas atascado." - ] + ], + "titleFr" : "Déclarer des variables en JavaScript", + "descriptionFr" : [ + "En informatique, une donnée comporte tout ce qui peut avoir du sens pour l'ordinateur. Javascript dispose de sept types de données différents qui sont undefined, null, boolean, string, symbol, number et object.", + "Par exemple, les ordinateurs font la différence entre les nombres tel que 12 et les strings, tels que \"12\", \"dog\", ou \"123 cats\", qui sont des collections de caractères. Les ordinateurs peuvent faire des opérations mathématiques sur un nombre, mais pas sur une chaîne de caractères.", + "Les variables permettent aux ordinateurs de stocker et manipuler les données de façon dynamique. Ils font cela en utilisant un
label
qui réfère à la donnée plutôt que d'utiliser la donnée elle-même. Les sept types de données peuvent être stockés dans une variable.", + "Les variables sont similaires aux x et y que vous utilisez en mathématiques, ce qui veut dire que ce sont des noms simples qui représentent les données que l'on veut utiliser. Les variables de l'ordinateur diffèrent de celles des mathématiques car elles peuvent stocker différentes valeurs à différents moments.", + "On peut dire à JavaScript de créer ou déclarer une variable en la précédant du mot-clé var, comme ceci:", + "var notreNom;", + "crée une variable appelée notreNom.On termine nos expressions avec un point virgule en JavaScript.", + "Le nom d'une variable peut être composé de nombres, lettres et $ ou _, mais ne peut contenir d'espaces ou commencer par un nombre.", + "

Instructions

", + "Utilisez le mot-clé var pour créer une variable appelée monNom", + "Conseil
Regardez à l'exemple de notreNom si vous vous êtes bloqué." + ] }, { "id": "56533eb9ac21ba0edf2244a8", From ff5a28a0d90f8168aeaffe9810b43d3effca93e9 Mon Sep 17 00:00:00 2001 From: Stuart Date: Wed, 22 Jun 2016 10:10:38 +0100 Subject: [PATCH 05/16] Fix/Improve Accessibilty Practices --- public/json/cats.json | 3 + .../bootstrap.json | 68 ++++---- .../html5-and-css.json | 163 +++++------------- .../json-apis-and-ajax.json | 8 +- 4 files changed, 82 insertions(+), 160 deletions(-) diff --git a/public/json/cats.json b/public/json/cats.json index 84d9d1b243..0f8ce22a69 100644 --- a/public/json/cats.json +++ b/public/json/cats.json @@ -2,6 +2,7 @@ { "id": 0, "imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", + "altText": "A white cat wearing a green helmet shaped melon on it's head. ", "codeNames": [ "Juggernaut", "Mrs. Wallace", @@ -11,6 +12,7 @@ { "id": 1, "imageLink": "https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg", + "altText": "A white cat with blue eys, looking very grumpy. ", "codeNames": [ "Oscar", "Scrooge", @@ -20,6 +22,7 @@ { "id": 2, "imageLink": "https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg", + "altText": "A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ", "codeNames": [ "The Doctor", "Loki", diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/01-front-end-development-certification/bootstrap.json index c8ea98fb5e..858ba22bb6 100644 --- a/seed/challenges/01-front-end-development-certification/bootstrap.json +++ b/seed/challenges/01-front-end-development-certification/bootstrap.json @@ -48,7 +48,7 @@ "", "

Click here for cat photos.

", "", - "", + "\"A", "", "

Things cats love:

", "
    ", @@ -141,7 +141,7 @@ "", "

    Click here for cat photos.

    ", "", - " ", + " \"A", "", "

    Things cats love:

    ", "
      ", @@ -231,9 +231,9 @@ "", "

      Click here for cat photos.

      ", "", - " ", + " \"A", "", - " ", + " \"Three", "

      Things cats love:

      ", "
        ", "
      • cat nip
        • ", @@ -316,9 +316,9 @@ "", "

        Click here for cat photos.

        ", "", - " ", + " \"A", "", - " ", + " \"Three", "", "

        Things cats love:

        ", "
          ", @@ -409,9 +409,9 @@ "", "

          Click here for cat photos.

          ", "", - " ", + " \"A", "", - " ", + " \"Three", " ", "

          Things cats love:

          ", "
            ", @@ -511,9 +511,9 @@ "", "

            Click here for cat photos.

            ", "", - " ", + " \"A", "", - " ", + " \"Three", " ", "

            Things cats love:

            ", "
              ", @@ -599,9 +599,9 @@ "", "

              Click here for cat photos.

              ", "", - " ", + " \"A", "", - " ", + " \"Three", " ", "

              Things cats love:

              ", "
                ", @@ -688,9 +688,9 @@ "", "

                Click here for cat photos.

                ", "", - " ", + " \"A", "", - " ", + " \"Three", " ", " ", "

                Things cats love:

                ", @@ -783,9 +783,9 @@ "", "

                Click here for cat photos.

                ", "", - " ", + " \"A", "", - " ", + " \"Three", " ", " ", " ", @@ -884,9 +884,9 @@ "", "

                Click here for cat photos.

                ", "", - " ", + " \"A", "", - " ", + " \"Three", "
                ", "
                ", " ", @@ -979,9 +979,9 @@ "
                ", "

                CatPhotoApp

                ", "", - " ", + " \"A", "", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1077,9 +1077,9 @@ "
                ", "

                CatPhotoApp

                ", "", - " ", + " \"A", "", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1178,10 +1178,10 @@ "

                CatPhotoApp

                ", "
                ", "
                ", - " ", + " \"A", "
                ", "
                ", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1273,10 +1273,10 @@ "

                CatPhotoApp

                ", "
                ", "
                ", - " ", + " \"A", "
                ", "
                ", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1357,10 +1357,10 @@ "

                CatPhotoApp

                ", "
                ", "
                ", - " ", + " \"A", "
                ", "
                ", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1442,10 +1442,10 @@ "

                CatPhotoApp

                ", "
                ", "
                ", - " ", + " \"A", "
                ", "
                ", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1534,10 +1534,10 @@ "

                CatPhotoApp

                ", "
                ", "
                ", - " ", + " \"A", "
                ", "
                ", - " ", + " \"Three", "
                ", "
                ", " ", @@ -1635,10 +1635,10 @@ "

                CatPhotoApp

                ", "
                ", "
                ", - " ", + " \"A", "
                ", "
                ", - " ", + " \"Three", "
                ", "
                ", " ", diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 5e89efbdee..d0812afd52 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -57,7 +57,7 @@ "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.", "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.", "Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"." - ], + ], "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", @@ -129,7 +129,7 @@ "L'élément h2 que vous entrerez créera un élément h2 sur le site.", "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.", "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"." - ], + ], "title": "Headline with the h2 Element", "description": [ "Over the next few challenges, we'll build an HTML5 app that will look something like this:", @@ -188,7 +188,7 @@ "Vous pouvez créer un élément p comme ceci :", "<p>Je suis une balise p!</p>", "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"." - ], + ], "title": "Inform with the Paragraph Element", "description": [ "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", @@ -244,7 +244,7 @@ "Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.", "Vous pouvez débuter un commentaire avec <!-- et le terminer avec -->.", "Décommenter vos éléments h1, h2 et p." - ], + ], "title": "Uncomment HTML", "description": [ "Commenting is a way that you can leave comments within your code without affecting the code itself.", @@ -302,7 +302,7 @@ "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <!-- et que pour le terminer, vous devez utiliser -->.", "Ici vous devrez terminer le commentaire juste avant que l'élément h2 commence.", "Commentez les éléments h1 et p, mais laissez l'élément h2 tel quel." - ], + ], "title": "Comment out HTML", "description": [ "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->", @@ -356,14 +356,14 @@ "Текст lorem ipsum применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.", "5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом kitty ipsum.", "Замените текст внутри вашего элемента p первыми двумя словами текста kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." - ], + ], "titleFR": "Remplissez les blancs avec du faux-texte", "descriptionFR": [ "Les développeurs Web utilisent traditionnellement du lorem ipsum comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.", "Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16ème siècle et cette tradition se poursuit sur le Web.", "Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte Kitty ipsum.", "Remplacez le texte à l'intérieur des éléments p avec ces quelques mots du texte Kitty ipsum : Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." - ], + ], "title": "Fill in the Blank with Placeholder Text", "description": [ "Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.", @@ -416,7 +416,7 @@ "Notre téléphone n'a pas beaucoup d'espace vertical.", "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.", "Supprimez l'élément h1 afin de simplifier l'affichage." - ], + ], "title": "Delete HTML Elements", "description": [ "Our phone doesn't have much vertical space.", @@ -481,7 +481,7 @@ "Voici comment changer en bleu la couleur du texte de votre élément h2 :", "<h2 style=\"color: blue\">CatPhotoApp</h2>", "Changez le style de votre élément h2 pour que son texte soit de couleur rouge." - ], + ], "title": "Change the Color of Text", "description": [ "Now let's change the color of some of our text.", @@ -554,14 +554,14 @@ "descriptionFR": [ "Avec CSS, il y a des centaines de propriétés que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.", "Quand vous avez entré <h2 style=\"color: red\">CatPhotoApp</h2>, vous donniez à cet élément h2 uniquement, un style inline.", - "C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.", + "C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.", "Au sommet de votre code, créez un élément style comme ceci :", - "
                <style>
                </style>
                ", - "À l'intérieur de cet élément style, vous pouvez créer des sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :", + "
                <style>
                </style>
                ", + "À l'intérieur de cet élément style, vous pouvez créer des sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :", "
                <style>
                  h2 {color: red;}
                </style>
                ", "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes ({ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.", "Supprimez les attributs de styles de votre élément h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu." - ], + ], "title": "Use CSS Selectors to Style Elements", "description": [ "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", @@ -1066,6 +1066,9 @@ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", "An example of this would be:", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.", + "Lets add an alt attribute to our img example above:", + "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up. \">", "Note that in most cases, img elements are self-closing.", "Try it with this image:", "https://bit.ly/fcc-relaxing-cat" @@ -1094,7 +1097,8 @@ ], "tests": [ "assert($(\"img\").length > 0, 'message: Your page should have an image element.');", - "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a src attribute that points to the kitten image.');" + "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a src attribute that points to the kitten image.');", + "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\')[\\s\\w\\.\\,\\!]+?(\\\"|\\')/), 'message: Your image element must have an alt attribute.');" ], "type": "waypoint", "titleEs": "Añade imágenes a tu sitio web", @@ -1164,7 +1168,7 @@ "", "

                CatPhotoApp

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1251,7 +1255,7 @@ "", "

                CatPhotoApp

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1330,7 +1334,7 @@ "", "

                CatPhotoApp

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1400,7 +1404,7 @@ "", "

                CatPhotoApp

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1485,7 +1489,7 @@ "", "

                CatPhotoApp

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1577,7 +1581,7 @@ "", "cat photos", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1662,7 +1666,7 @@ "", "

                Click here for cat photos.

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1708,7 +1712,7 @@ "description": [ "You can make elements into links by nesting them within an a element.", "Nest your image within an a element. Here's an example:", - "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera. \"></a>", "Remember to use # as your a element's href property in order to turn it into a dead link.", "Place the existing image element within an anchor element.", "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." @@ -1745,7 +1749,7 @@ "", "

                Click here for cat photos.

                ", "", - "", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -1767,91 +1771,6 @@ "titleDe": "Verlinke ein Bild", "challengeType": 0 }, - { - "id": "bad87fee1348bd9aedf08818", - "descriptionPtBR": [ - "Os atributos alt, também conhecidos como texto alternativo, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos alt.", - "Em resumo: Todas as imagem devem ter um atributo alt!", - "Você pode adicionar um atributo alt já no elemento img assim:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">", - "Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato." - ], - "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo", - "descriptionDe": [ - "alt Attribute – auch alt text genannt – werden von Browsern angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.", - "Kurz gesagt: Jedes Bild sollte ein alt Attribut beinhalten!", - "Du kannst das alt Attribut direkt in das Img Element einfügen:", - "<img src=\"www.deine-bild-quelle.com/dein-bild.jpg\" alt=\"dein alt Text\">", - "Füge zu unserem Katzen-Bild ein alt Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu." - ], - "titleRU": "Добавьте альтернативный текст к изображению для улучшения доступа", - "descriptionRU": [ - "Атрибуты alt, также известные как alt text, являются тем, что браузеры отобразят, если изображение загрузить не получится. Атрибуты alt важны для незрячих или пользователей с ограниченными возможностями в области зрения для понимания того, что отображает изображение. Также поисковые системы используют атрибуты alt.", - "Вкратце, каждое изображение должно иметь атрибут alt!", - "Вы можете добавить атрибут alt прямо в элемент img следующим образом:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"ваш альтернативный текст\">", - "Добавьте атрибут alt с текстом A cute orange cat lying on its back к нашему фото кота." - ], - "title": "Add Alt Text to an Image for Accessibility", - "description": [ - "alt attributes, also known as alt text, are what browsers will display if they fail to load the image. alt attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at alt attributes.", - "In short, every image should have an alt attribute!", - "You can add an alt attribute right in the img element like this:", - "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\">", - "Add an alt attribute with the text A cute orange cat lying on its back to our cat photo." - ], - "challengeSeed": [ - "", - "", - "", - "

                CatPhotoApp

                ", - "", - "

                Click here for cat photos.

                ", - "", - "", - "", - "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", - "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " - ], - "tests": [ - "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have an alt attribute set to A cute orange cat lying on its back');" - ], - "type": "waypoint", - "titleEs": "Agrega texto alternativo a una imagen para dar Accesibilidad", - "descriptionEs": [ - "Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos alt. ", - "En resumen, ¡cada imagen debe tener un atributo alt!", - "Puedes agregar un atributo alt justo en el elemento img así:", - "<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">", - "Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato." - ], - "titleDe": "Füge Alt Text für mehr Barrierefreiheit hinzu", - "challengeType": 0 - }, { "id": "bad87fee1348bd9aedf08827", "descriptionPtBR": [ @@ -1924,7 +1843,7 @@ "", "

                Click here for cat photos.

                ", "", - "\"A", + "\"A", "", "

                Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

                ", "

                Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

                " @@ -2020,7 +1939,7 @@ "", "

                Click here for cat photos.

                ", "", - "\"A", + "\"A", "", "

                Things cats love:

                ", "
                  ", @@ -2121,7 +2040,7 @@ "", "

                  Click here for cat photos.

                  ", "", - "\"A", + "\"A", "", "

                  Things cats love:

                  ", "
                    ", @@ -2213,7 +2132,7 @@ "", "

                    Click here for cat photos.

                    ", "", - "\"A", + "\"A", "", "

                    Things cats love:

                    ", "
                      ", @@ -2306,7 +2225,7 @@ "", "

                      Click here for cat photos.

                      ", "", - "\"A", + "\"A", "", "

                      Things cats love:

                      ", "
                        ", @@ -2399,7 +2318,7 @@ "", "

                        Click here for cat photos.

                        ", "", - "\"A", + "\"A", "", "

                        Things cats love:

                        ", "
                          ", @@ -2498,7 +2417,7 @@ "", "

                          Click here for cat photos.

                          ", "", - "\"A", + "\"A", "", "

                          Things cats love:

                          ", "
                            ", @@ -2605,7 +2524,7 @@ "", "

                            Click here for cat photos.

                            ", "", - "\"A", + "\"A", "", "

                            Things cats love:

                            ", "
                              ", @@ -2719,7 +2638,7 @@ "", "

                              Click here for cat photos.

                              ", "", - "\"A", + "\"A", "", "

                              Things cats love:

                              ", "
                                ", @@ -2821,7 +2740,7 @@ "", "

                                Click here for cat photos.

                                ", "", - "\"A", + "\"A", "", "

                                Things cats love:

                                ", "
                                  ", @@ -2925,7 +2844,7 @@ "", "

                                  Click here for cat photos.

                                  ", "", - "\"A", + "\"A", "", "

                                  Things cats love:

                                  ", "
                                    ", @@ -3016,7 +2935,7 @@ "", "

                                    Click here for cat photos.

                                    ", "", - "\"A", + "\"A", "", "
                                    ", "

                                    Things cats love:

                                    ", @@ -3128,7 +3047,7 @@ "", "

                                    Click here for cat photos.

                                    ", "", - "\"A", + "\"A", "", "
                                    ", "

                                    Things cats love:

                                    ", @@ -3242,7 +3161,7 @@ "", "

                                    Click here for cat photos.

                                    ", "", - "\"A", + "\"A", "", "
                                    ", "

                                    Things cats love:

                                    ", diff --git a/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json b/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json index bb14209852..310278e1aa 100644 --- a/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json +++ b/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json @@ -289,7 +289,7 @@ "We've seen from the last two lessons that each object in our JSON array contains an imageLink key with a value that is the URL of a cat's image.", "When we're looping through these objects, let's use this imageLink property to display this image in an img element.", "Here's the code that does this:", - "html += \"<img src = '\" + val.imageLink + \"'>\";" + "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";" ], "challengeSeed": [ "fccss", @@ -349,14 +349,14 @@ "Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave imageLink con un valor que corresponde a la URL de la imagen de un gato.", "Cuando estamos recorriendo estos objetos, usemos esta propiedad imageLink para visualizar la imagen en un elemento img.", "Aquí está el código que hace esto:", - "html += \"<img src = '\" + val.imageLink + \"'>\";" + "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";" ], "titlePt": "Apresentar as imagens da fonte de dados", "descriptionPt": [ "Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave imageLink com um valor que corresponde a URL da imagem de um gato.", "Quando estamos percorrendo por estes objetos, usamos a propriedade imageLink para visualizar a imagem em um elemento img.", "Aqui está o código para fazer isso:", - "html += \"<img src = '\" + val.imageLink + \"'>\";" + "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";" ] }, { @@ -387,7 +387,7 @@ "", " html += \"
                                    \"", "", - " html += \"\"", + " html += \"\"", "", " html += \"
                                    \"", "", From 70769d56a55006673cf1d8d55f37b4e0f90f1fd5 Mon Sep 17 00:00:00 2001 From: dhcodes Date: Thu, 21 Jul 2016 09:31:12 -0500 Subject: [PATCH 06/16] remove Wiki sidebar HTML, LESS, JS remove Wiki sidebar --- client/commonFramework/bindings.js | 5 +- client/less/main.less | 3 +- client/less/wiki.less | 177 ----------------------------- client/main.js | 87 -------------- server/views/partials/footer.jade | 8 +- server/views/wiki/show.jade | 23 ---- 6 files changed, 5 insertions(+), 298 deletions(-) delete mode 100644 client/less/wiki.less delete mode 100644 server/views/wiki/show.jade diff --git a/client/commonFramework/bindings.js b/client/commonFramework/bindings.js index 4180583f5d..5c193fddf0 100644 --- a/client/commonFramework/bindings.js +++ b/client/commonFramework/bindings.js @@ -151,7 +151,7 @@ window.common = (function(global) { } $('.modal').on('show.bs.modal', function() { - $('.gitter-chat-embed, .wiki-aside, .map-aside') + $('.gitter-chat-embed, .map-aside') .addClass('is-collapsed'); }); @@ -183,11 +183,10 @@ window.common = (function(global) { $('#show-solution').on('click', function() { $('#complete-courseware-dialog').modal('hide'); - $('#nav-wiki-btn').click(); }); $('#challenge-help-btn').on('click', function() { - $('.wiki-aside, .map-aside, #chat-embed-main').addClass('is-collapsed'); + $('.map-aside, #chat-embed-main').addClass('is-collapsed'); }); $('#help-ive-found-a-bug-wiki-article').on('click', function() { diff --git a/client/less/main.less b/client/less/main.less index d9cac6ae6e..76867f4707 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -1179,5 +1179,4 @@ and (max-width : 400px) { @import "jobs.less"; @import "challenge.less"; @import "toastr.less"; -@import "map.less"; -@import "wiki.less"; +@import "map.less"; \ No newline at end of file diff --git a/client/less/wiki.less b/client/less/wiki.less deleted file mode 100644 index 6a454032a9..0000000000 --- a/client/less/wiki.less +++ /dev/null @@ -1,177 +0,0 @@ -/* - * based off of https://github.com/gitterHQ/sidecar - * license: MIT - */ - -#wikiFrame { - width: 100%; - height: 100%; - top:0; - bottom: 0; - position: absolute; - overflow: hidden; -} - -.wiki-aside { - width:500px; - - z-index: 20000; - position: fixed; - top: 0; - bottom: 0; - right: 0; - - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - - background-color: @body-bg; - border-left: 1px solid #ddd; - box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.1); - - transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7); - - &.is-collapsed:not(.is-loading) { - -webkit-transform: translateX(110%); - transform: translateX(110%); - } - - /* Add some "extension" so that there isn't a gap - * when we translate(via animation) more than 100% */ - &:after { - content: ''; - - z-index: -1; - position: absolute; - top: 0; - left: 100%; - bottom: 0; - right: -100%; - - background-color: @body-bg; - } - - iframe { - width: 100%; - height: 100%; - top:0; - bottom:0; - position:absolute; - overflow: hidden; - } -} - -.wiki-aside .wiki-header { - display: none; -} - -.wiki-aside .wiki-container { - padding-top: 10px; -} - -.wiki-aside .wikiSelector { - top: 50px; -} - -.wiki-aside-action-bar { - position: absolute; - top: 0; - right: 15px; - - display: -webkit-flex; - display: flex; - justify-content: flex-end; - - padding-bottom: 5px; - padding-right:0px; - padding-top:5px; - z-index: 100; -} - -.wiki-fixed-header { - background: linear-gradient(180deg,#fff 0,#fff 70%,hsla(0,0%,100%,0)); - padding: 5px 0 18px 0; - z-index: 1; - left: 0; - top: 0; - @media (max-width: 720px) { - padding-top:30px; - } - p { - margin: 5px 0 20px; - @media (max-width: 720px) { - margin-bottom:10px; - } - } - hr { - margin:30px 0; - @media (max-width: 720px) { - margin:25px 0; - } - } - } - -.wiki-buttons { - margin-top: -10px; - & button, - & .input-group{ - width:300px; - } - .input-group{ - margin-top: 15px; - margin-left: auto; - margin-right: auto; - } -} - -#wiki-filter { - background:#fff; - border-color: darkgreen; -} - -.wiki-aside-action-item { - display: -webkit-flex; - display: flex; - /* main axis */ - justify-content: center; - /* cross axis */ - align-items: center; - - width: 40px; - height: 40px; - - padding-left: 0; - padding-right: 0; - - opacity: 0.65; - background: none; - background-position: center center; - background-repeat: no-repeat; - background-size: 22px 22px; - border: 0; - outline: none; - - cursor: pointer; - cursor: hand; - - transition: all 0.2s ease; - - &:hover, - &:focus { - opacity: 1; - } - - &:active { - filter: hue-rotate(80deg) saturate(150); - } -} - -.wiki-aside-action-pop-out { - margin-right: -4px; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMTcxLjQyOSIgZmlsbD0iIzNhMzEzMyI+PHBhdGggZD0iTTE1Ny4xNDMsMTAzLjU3MXYzNS43MTRjMCw4Ljg1NC0zLjE0NCwxNi40MjYtOS40MzEsMjIuNzEzcy0xMy44NTgsOS40MzEtMjIuNzEyLDkuNDMxSDMyLjE0MyBjLTguODU0LDAtMTYuNDI1LTMuMTQ0LTIyLjcxMi05LjQzMVMwLDE0OC4xNCwwLDEzOS4yODVWNDYuNDI5YzAtOC44NTQsMy4xNDQtMTYuNDI1LDkuNDMxLTIyLjcxMiBjNi4yODctNi4yODcsMTMuODU4LTkuNDMxLDIyLjcxMi05LjQzMWg3OC41NzJjMS4wNDEsMCwxLjg5NiwwLjMzNSwyLjU2NiwxLjAwNGMwLjY3LDAuNjcsMS4wMDQsMS41MjUsMS4wMDQsMi41NjdWMjUgYzAsMS4wNDItMC4zMzQsMS44OTctMS4wMDQsMi41NjdjLTAuNjcsMC42Ny0xLjUyNSwxLjAwNC0yLjU2NiwxLjAwNEgzMi4xNDNjLTQuOTExLDAtOS4xMTUsMS43NDktMTIuNjEyLDUuMjQ2IHMtNS4yNDYsNy43MDEtNS4yNDYsMTIuNjEydjkyLjg1NmMwLDQuOTExLDEuNzQ5LDkuMTE1LDUuMjQ2LDEyLjYxMnM3LjcwMSw1LjI0NSwxMi42MTIsNS4yNDVIMTI1YzQuOTEsMCw5LjExNS0xLjc0OCwxMi42MTEtNS4yNDUgYzMuNDk3LTMuNDk3LDUuMjQ2LTcuNzAxLDUuMjQ2LTEyLjYxMnYtMzUuNzE0YzAtMS4wNDIsMC4zMzQtMS44OTcsMS4wMDQtMi41NjdjMC42Ny0wLjY2OSwxLjUyNS0xLjAwNCwyLjU2Ny0xLjAwNGg3LjE0MyBjMS4wNDIsMCwxLjg5NywwLjMzNSwyLjU2NywxLjAwNEMxNTYuODA5LDEwMS42NzQsMTU3LjE0MywxMDIuNTI5LDE1Ny4xNDMsMTAzLjU3MXogTTIwMCw3LjE0M3Y1Ny4xNDMgYzAsMS45MzUtMC43MDcsMy42MDktMi4xMjEsNS4wMjJjLTEuNDEzLDEuNDE0LTMuMDg4LDIuMTIxLTUuMDIxLDIuMTIxYy0xLjkzNSwwLTMuNjA5LTAuNzA3LTUuMDIyLTIuMTIxbC0xOS42NDQtMTkuNjQzIGwtNzIuNzY3LDcyLjc2OWMtMC43NDQsMC43NDQtMS42LDEuMTE1LTIuNTY3LDEuMTE1cy0xLjgyMy0wLjM3MS0yLjU2Ny0xLjExNUw3Ny41NjcsMTA5LjcxYy0wLjc0NC0wLjc0NC0xLjExNi0xLjYtMS4xMTYtMi41NjcgYzAtMC45NjcsMC4zNzItMS44MjIsMS4xMTYtMi41NjZsNzIuNzY4LTcyLjc2OGwtMTkuNjQ0LTE5LjY0M2MtMS40MTMtMS40MTQtMi4xMi0zLjA4OC0yLjEyLTUuMDIyYzAtMS45MzUsMC43MDctMy42MDksMi4xMi01LjAyMiBDMTMyLjEwNSwwLjcwNywxMzMuNzc5LDAsMTM1LjcxNSwwaDU3LjE0M2MxLjkzNCwwLDMuNjA4LDAuNzA3LDUuMDIxLDIuMTIxQzE5OS4yOTMsMy41MzQsMjAwLDUuMjA4LDIwMCw3LjE0M3oiLz48L3N2Zz4=) -} - -.wiki-aside-action-collapse { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzEuNDI5IDE3MS40MjkiIGZpbGw9IiMzYTMxMzMiPjxwYXRoIGQ9Ik0xMjIuNDMzLDEwNi4xMzhsLTE2LjI5NSwxNi4yOTVjLTAuNzQ0LDAuNzQ0LTEuNiwxLjExNi0yLjU2NiwxLjExNmMtMC45NjgsMC0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTUuMjktMTUuMjkgbC0xNS4yOSwxNS4yOWMtMC43NDQsMC43NDQtMS42LDEuMTE2LTIuNTY3LDEuMTE2cy0xLjgyMy0wLjM3Mi0yLjU2Ny0xLjExNmwtMTYuMjk0LTE2LjI5NWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY2IGMwLTAuOTY4LDAuMzcyLTEuODIzLDEuMTE2LTIuNTY3bDE1LjI5LTE1LjI5bC0xNS4yOS0xNS4yOWMtMC43NDQtMC43NDQtMS4xMTYtMS42LTEuMTE2LTIuNTY3czAuMzcyLTEuODIzLDEuMTE2LTIuNTY3IEw2NS4yOSw0OC45OTZjMC43NDQtMC43NDQsMS42LTEuMTE2LDIuNTY3LTEuMTE2czEuODIzLDAuMzcyLDIuNTY3LDEuMTE2bDE1LjI5LDE1LjI5bDE1LjI5LTE1LjI5IGMwLjc0NC0wLjc0NCwxLjYtMS4xMTYsMi41NjctMS4xMTZjMC45NjcsMCwxLjgyMiwwLjM3MiwyLjU2NiwxLjExNmwxNi4yOTUsMTYuMjk0YzAuNzQ0LDAuNzQ0LDEuMTE2LDEuNiwxLjExNiwyLjU2NyBzLTAuMzcyLDEuODIzLTEuMTE2LDIuNTY3bC0xNS4yOSwxNS4yOWwxNS4yOSwxNS4yOWMwLjc0NCwwLjc0NCwxLjExNiwxLjYsMS4xMTYsMi41NjcgQzEyMy41NDksMTA0LjUzOSwxMjMuMTc3LDEwNS4zOTQsMTIyLjQzMywxMDYuMTM4eiBNMTQ2LjQyOSw4NS43MTRjMC0xMS4wMTItMi43MTctMjEuMTY4LTguMTQ4LTMwLjQ2OSBzLTEyLjc5Ny0xNi42NjctMjIuMDk4LTIyLjA5OFM5Ni43MjYsMjUsODUuNzE0LDI1cy0yMS4xNjgsMi43MTYtMzAuNDY5LDguMTQ3UzM4LjU3OSw0NS45NDUsMzMuMTQ3LDU1LjI0NlMyNSw3NC43MDMsMjUsODUuNzE0IHMyLjcxNiwyMS4xNjgsOC4xNDcsMzAuNDY5czEyLjc5NywxNi42NjYsMjIuMDk4LDIyLjA5OHMxOS40NTcsOC4xNDgsMzAuNDY5LDguMTQ4czIxLjE2OC0yLjcxNywzMC40NjktOC4xNDggczE2LjY2Ni0xMi43OTcsMjIuMDk4LTIyLjA5OFMxNDYuNDI5LDk2LjcyNiwxNDYuNDI5LDg1LjcxNHogTTE3MS40MjksODUuNzE0YzAsMTUuNTUxLTMuODMyLDI5Ljg5My0xMS40OTYsNDMuMDI0IGMtNy42NjQsMTMuMTMzLTE4LjA2MiwyMy41My0zMS4xOTQsMzEuMTk0Yy0xMy4xMzIsNy42NjQtMjcuNDc0LDExLjQ5Ni00My4wMjQsMTEuNDk2cy0yOS44OTItMy44MzItNDMuMDI0LTExLjQ5NiBjLTEzLjEzMy03LjY2NC0yMy41MzEtMTguMDYyLTMxLjE5NC0zMS4xOTRDMy44MzIsMTE1LjYwNywwLDEwMS4yNjUsMCw4NS43MTRTMy44MzIsNTUuODIyLDExLjQ5Niw0Mi42OSBjNy42NjQtMTMuMTMzLDE4LjA2Mi0yMy41MzEsMzEuMTk0LTMxLjE5NEM1NS44MjIsMy44MzIsNzAuMTY0LDAsODUuNzE0LDBzMjkuODkzLDMuODMyLDQzLjAyNCwxMS40OTYgYzEzLjEzMyw3LjY2NCwyMy41MywxOC4wNjIsMzEuMTk0LDMxLjE5NEMxNjcuNTk3LDU1LjgyMiwxNzEuNDI5LDcwLjE2NCwxNzEuNDI5LDg1LjcxNHoiLz48L3N2Zz4=) -} diff --git a/client/main.js b/client/main.js index d36009deb7..44bee9c5fa 100644 --- a/client/main.js +++ b/client/main.js @@ -327,89 +327,6 @@ $(document).ready(function() { } } - $('#nav-wiki-btn').on('click', function(event) { - if (!(event.ctrlKey || event.metaKey)) { - toggleWiki(); - } - }); - - $('.wiki-aside-action-collapse').on('click', collapseWiki); - - function getWikiPath() { - if (!window.common) { - return false; - } - var challengeType = window.common.challengeType; - var dashedName = window.common.dashedName; - var prefix = ''; - // Get wiki prefix depending on type of challenge - // Type 0, 1 typically have solutions on the wiki prefixed with 'challenge-' - // Type 5 typically has a solution on the wiki prefixed with algorithm-' - if (challengeType === '0' || challengeType === '1') { - prefix = 'challenge-'; - return prefix + dashedName; - } - if (challengeType === '5') { - prefix = 'algorithm-'; - return prefix + dashedName; - } - return false; - } - - function showWiki() { - if (!main.isWikiAsideLoad) { - var wikiURL = '//freecodecamp.github.io/wiki/en/'; - var lang = window.location.toString().match(/\/\w{2}\//); - lang = (lang) ? lang[0] : '/en/'; - var wikiPath = getWikiPath(); - if (wikiPath) { - wikiURL = wikiURL + wikiPath + '/'; - } else if (lang !== '/en/') { - // Strip default '/en/' language ending and add the user's language - wikiURL = wikiURL.substr(0, wikiURL.length - 4) + lang; - } - var wikiAside = $('