JSFiddle - React, Tailwind, and code Playground
by Margus Martsepp
HTML
<div class="col-md-6 panel">
<div class="topic-containers retro-box " dnd-allowed-types="[vm.getDndTypeNewGroup()]">
<div class="topic-title text-center">
<span class="group-total-issues ng-binding" ng-show="vm.isEmptyGroup()" ng-bind="vm.getTotalIssues()">19</span>
<br>
<span class="issues-title" ng-show="vm.isEmptyGroup()">Issues</span>
<span class="issues-title ng-hide" ng-hide="vm.isEmptyGroup()">Available Topics</span>
</div>
<div class="alert alert-warning group-flex-text" ng-show="vm.isEmptyGroup()">
<span class="glyphicon glyphicon-info-sign text-info group-glyph"> </span>
<p>
Group similar cards together
</p>
</div>
<div class="topics-body">
<!-- ngRepeat: group in vm.groupCollection.groupList --><ul ng-repeat="group in vm.groupCollection.groupList" class="group-list-name-ul ng-scope group-list-name-ul-not-grouped" ng-class="{'group-list-name-ul-not-grouped' : !group.grouped}" ng-show="vm.isEmptyGroup() || !group.grouped">
<div class="group-list-name ng-binding ng-hide" ng-class="group.grouped ? 'ideas-group-name':''" ng-show="group.grouped" ng-click="group.grouped && vm.isCurrentUserMod() ? vm.openGroup(group) : vm.collapseGroup(group)">
</div>
<!-- ngRepeat: idea in group.ideas track by $index --><li ng-repeat="idea in group.ideas track by $index" class="draggable ng-scope retro-list-item vote-group-transition" dnd-draggable="idea" dnd-type="vm.getDndTypeGroups()" dnd-moved="group.ideas.splice($index, 1)" dnd-effect-allowed="move" dnd-dragend="vm.dropGroupListAdd(idea)" dnd-dragstart="vm.groupDragStartRight()" ng-click="group.grouped ? vm.openGroup(group) :...