Commit 44add78161ac8f8a3322b27af04cdccd9df18aca

Authored by Sergio Oliveira
1 parent ceb6cbaf

Added fork me ribbon

colab/static/third-party/ribbon/gh-fork-ribbon.css 0 → 100644
... ... @@ -0,0 +1,140 @@
  1 +/*!
  2 + * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
  3 + * https://github.com/simonwhitaker/github-fork-ribbon-css
  4 +*/
  5 +
  6 +/* Left will inherit from right (so we don't need to duplicate code) */
  7 +.github-fork-ribbon {
  8 + /* The right and left classes determine the side we attach our banner to */
  9 + position: absolute;
  10 +
  11 + /* Add a bit of padding to give some substance outside the "stitching" */
  12 + padding: 2px 0;
  13 +
  14 + /* Set the base colour */
  15 + background-color: #a00;
  16 +
  17 + /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
  18 + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
  19 + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  20 + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  21 + background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  22 + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  23 + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
  24 +
  25 + /* Add a drop shadow */
  26 + -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  27 + -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  28 + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
  29 +
  30 + /* Set the font */
  31 + font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
  32 +
  33 + z-index: 9999;
  34 + pointer-events: auto;
  35 +}
  36 +
  37 +.github-fork-ribbon a,
  38 +.github-fork-ribbon a:hover {
  39 + /* Set the text properties */
  40 + color: #fff;
  41 + text-decoration: none;
  42 + text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  43 + text-align: center;
  44 +
  45 + /* Set the geometry. If you fiddle with these you'll also need
  46 + to tweak the top and right values in .github-fork-ribbon. */
  47 + width: 200px;
  48 + line-height: 20px;
  49 +
  50 + /* Set the layout properties */
  51 + display: inline-block;
  52 + padding: 2px 0;
  53 +
  54 + /* Add "stitching" effect */
  55 + border-width: 1px 0;
  56 + border-style: dotted;
  57 + border-color: #fff;
  58 + border-color: rgba(255, 255, 255, 0.7);
  59 +}
  60 +
  61 +.github-fork-ribbon-wrapper {
  62 + width: 150px;
  63 + height: 150px;
  64 + position: absolute;
  65 + overflow: hidden;
  66 + top: 0;
  67 + z-index: 9999;
  68 + pointer-events: none;
  69 +}
  70 +
  71 +.github-fork-ribbon-wrapper.fixed {
  72 + position: fixed;
  73 +}
  74 +
  75 +.github-fork-ribbon-wrapper.left {
  76 + left: 0;
  77 +}
  78 +
  79 +.github-fork-ribbon-wrapper.right {
  80 + right: 0;
  81 +}
  82 +
  83 +.github-fork-ribbon-wrapper.left-bottom {
  84 + position: fixed;
  85 + top: inherit;
  86 + bottom: 0;
  87 + left: 0;
  88 +}
  89 +
  90 +.github-fork-ribbon-wrapper.right-bottom {
  91 + position: fixed;
  92 + top: inherit;
  93 + bottom: 0;
  94 + right: 0;
  95 +}
  96 +
  97 +.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  98 + top: 42px;
  99 + right: -43px;
  100 +
  101 + -webkit-transform: rotate(45deg);
  102 + -moz-transform: rotate(45deg);
  103 + -ms-transform: rotate(45deg);
  104 + -o-transform: rotate(45deg);
  105 + transform: rotate(45deg);
  106 +}
  107 +
  108 +.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  109 + top: 42px;
  110 + left: -43px;
  111 +
  112 + -webkit-transform: rotate(-45deg);
  113 + -moz-transform: rotate(-45deg);
  114 + -ms-transform: rotate(-45deg);
  115 + -o-transform: rotate(-45deg);
  116 + transform: rotate(-45deg);
  117 +}
  118 +
  119 +
  120 +.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
  121 + top: 80px;
  122 + left: -43px;
  123 +
  124 + -webkit-transform: rotate(45deg);
  125 + -moz-transform: rotate(45deg);
  126 + -ms-transform: rotate(45deg);
  127 + -o-transform: rotate(45deg);
  128 + transform: rotate(45deg);
  129 +}
  130 +
  131 +.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
  132 + top: 80px;
  133 + right: -43px;
  134 +
  135 + -webkit-transform: rotate(-45deg);
  136 + -moz-transform: rotate(-45deg);
  137 + -ms-transform: rotate(-45deg);
  138 + -o-transform: rotate(-45deg);
  139 + transform: rotate(-45deg);
  140 +}
... ...
colab/static/third-party/ribbon/gh-fork-ribbon.ie.css 0 → 100644
... ... @@ -0,0 +1,78 @@
  1 +/*!
  2 + * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
  3 + * https://github.com/simonwhitaker/github-fork-ribbon-css
  4 +*/
  5 +
  6 +/* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and
  7 + * http://www.useragentman.com/IETransformsTranslator */
  8 +
  9 + .github-fork-ribbon {
  10 + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
  11 +}
  12 +
  13 +.github-fork-ribbon-wrapper.right .github-fork-ribbon {
  14 + /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
  15 + top: -22px;
  16 + right: -62px;
  17 +
  18 + /* IE8+ */
  19 + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
  20 + /* IE6 and 7 */
  21 + filter: progid:DXImageTransform.Microsoft.Matrix(
  22 + M11=0.7071067811865474,
  23 + M12=-0.7071067811865477,
  24 + M21=0.7071067811865477,
  25 + M22=0.7071067811865474,
  26 + SizingMethod='auto expand'
  27 + );
  28 +}
  29 +
  30 +.github-fork-ribbon-wrapper.left .github-fork-ribbon {
  31 + top: -22px;
  32 + left: -22px;
  33 +
  34 + /* IE8+ */
  35 + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
  36 + /* IE6 and 7 */
  37 + filter: progid:DXImageTransform.Microsoft.Matrix(
  38 + M11=0.7071067811865483,
  39 + M12=0.7071067811865467,
  40 + M21=-0.7071067811865467,
  41 + M22=0.7071067811865483,
  42 + SizingMethod='auto expand'
  43 + );
  44 +}
  45 +
  46 +.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
  47 + /* IE positioning hack (couldn't find a transform-origin alternative for IE) */
  48 + top: 12px;
  49 + left: -22px;
  50 +
  51 +
  52 + /* IE8+ */
  53 + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
  54 + /* IE6 and 7 */
  55 +/* filter: progid:DXImageTransform.Microsoft.Matrix(
  56 + M11=0.7071067811865474,
  57 + M12=-0.7071067811865477,
  58 + M21=0.7071067811865477,
  59 + M22=0.7071067811865474,
  60 + SizingMethod='auto expand'
  61 + );
  62 +*/}
  63 +
  64 +.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
  65 + top: 12px;
  66 + right: -62px;
  67 +
  68 + /* IE8+ */
  69 + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
  70 + /* IE6 and 7 */
  71 + filter: progid:DXImageTransform.Microsoft.Matrix(
  72 + M11=0.7071067811865483,
  73 + M12=0.7071067811865467,
  74 + M21=-0.7071067811865467,
  75 + M22=0.7071067811865483,
  76 + SizingMethod='auto expand'
  77 + );
  78 +}
... ...
colab/templates/base.html
... ... @@ -22,6 +22,12 @@
22 22 href="{% static 'third-party/font-awesome/css/font-awesome.min.css' %}"
23 23 type="text/css" media="screen" />
24 24  
  25 + <!-- Fork me Ribbons -->
  26 + <link rel="stylesheet" href="{% static 'third-party/ribbon/gh-fork-ribbon.css' %}">
  27 + <!--[if lt IE 9]>
  28 + <link rel="stylesheet" href="{% static 'third-party/ribbon/gh-fork-ribbon.ie.css' %}">
  29 + <![endif]-->
  30 +
25 31  
26 32 <!-- JQuery 2+ won't work for IE < 9 -->
27 33 <script type="text/javascript" src="{% static 'third-party/jquery-2.0.3.min.js' %}"></script>
... ... @@ -46,6 +52,13 @@
46 52 <body class="container" data-no-turbolink>
47 53 {% browserid_info %}
48 54  
  55 + {% block ribbon %}
  56 + <div class="github-fork-ribbon-wrapper left-bottom">
  57 + <div class="github-fork-ribbon">
  58 + <a href="http://beta.softwarepublico.gov.br/gitlab/softwarepublico/colab">{% trans 'Fork me!' %}</a>
  59 + </div>
  60 + </div>
  61 + {% endblock %}
49 62  
50 63 {% block navbar %}
51 64 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
... ...