Permalink
Browse files

Reposition search box after input inside using Angular.js

  • Loading branch information...
1 parent 7a9499a commit 980bfc52103a66267e1995642cff9b1eae3a3f77 @harishvc committed Oct 26, 2015
Showing with 27 additions and 12 deletions.
  1. +7 −0 static/js/angular-controller.js
  2. +8 −2 templates/base-home-bootstrap.html
  3. +12 −10 templates/index-bootstrap.html
@@ -0,0 +1,7 @@
+function InfoMessageController($scope) {
+ var showHeading = "False"
+ $scope.add = function(e) {
+ $scope.showHeading = "True"
+ showHeading = "True";
+ }
+}
@@ -10,15 +10,21 @@
<script type="text/javascript" src="/static/js/handlebars.js"></script>
<script type="text/javascript" src="/static/js/typeahead.bundle.js"></script>
<script type="text/javascript" src="/static/js/typeahead.js"></script>
- <script type="text/javascript" src="/static/js/custom.js"></script>
+ {% if showGAcode == "yes" %}
+ {% include 'ga.js' %}
+ <script type="text/javascript" src="/static/js/custom.js"></script>
+ {% else %}
+ <script type="text/javascript" src="/static/js/custom-no-ga.js"></script>
+ {% endif %}
<script type="text/javascript" src="/static/js/horizBarChart.js"></script>
+ <script type="text/javascript" src="/static/js/angular.min.js"></script>
+ <script type="text/javascript" src="/static/js/angular-controller.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/static/css/custom.css" />
<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/typeahead.css" />
<link rel="stylesheet" type="text/css" href="/static/css/horizBarChart.css" />
- {% if showGAcode == "yes" %} {% include 'ga.js' %} {% endif %}
</head>
<body>
{% block content %}{% endblock %}
@@ -28,29 +28,31 @@
<div class="row">
<div class="col-sm-12">
<div id="searchbox">
- <div id="intro">
- <p><i>Open-source developers all over the world are working on millions of projects: writing code &amp; documentation,
+ <div ng-app>
+ <div ng-controller="InfoMessageController">
+ <div id="intro">
+ <p ng-hide="showHeading"><i>Open-source developers all over the world are working on millions of projects: writing code &amp; documentation,
fixing &amp; submitting bugs, and so forth</i><prefix>*</prefix>.
Ask GitHub searches latest GitHub public timeline using event types to answer questions including
<a href="/?q=trending+now&amp;action=Ask+GitHub">what is trending now?</a>
<a href="/?q=top+repositories+sorted+by+contributors&amp;action=Ask+GitHub">what are the top repositories?</a>
<a href="/?q=dashboard&amp;action=Ask+GitHub">got insights?</a>
*<a href="https://githubarchive.org">GitHub Archive</a></p>
- </div>
- <div id="intro2">
- <p class="lead">Search latest GitHub timeline or type <code>q</code> for questions.
- <span class="nobr"><a href="mailto:harishvc@gmail.com?Subject=Ask+GitHub">Feedback?</a>
- <i class="circle-icon fa fa-smile-o fa-1x"></i></span>
- </p>
- </div>
+ </div>
+ <div id="intro2">
+ <p class="lead">Search latest GitHub timeline</p>
+ </div>
+
<form action="." method="get" id="askgithub">
<div class="input-group" id="multiple-datasets">
- <input type="text" class="typeahead" placeholder="search latest GitHub timeline" name="q" value="{{ query[0]["text"] }}">
+ <input type="text" class="typeahead" placeholder="Type q for questions" ng-keyup="add($event.q)" ng-model="q" name=q value="{{ query[0]["text"] }}">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
+ </div> <!-- controller -->
+ </div> <!-- ng-app -->
</div>
</div>
</div>

0 comments on commit 980bfc5

Please sign in to comment.