programa.html 23.9 KB
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div ncy-breadcrumb></div>
        </div>
    </div>
</div>
<div class="page--program">
    <section ng-if="!pagePrograma.article">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div ng-if="pagePrograma.loading" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
                    <div ng-if="pagePrograma.error" class="alert alert-warning" role="alert">Erro ao carregar o programa.</div>
                </div>
            </div>
        </div>
    </section>
    <div role="main" ng-class="pagePrograma.category.slug">
        <section ng-if="pagePrograma.article.body">
            <div class="container">
                <div class="row">
                    <article class="program-preview" ng-class="{ 'program-preview--archived': pagePrograma.article.archived }">
                        <!-- Preview > Titulo -->
                        <div class="col-md-12">
                            <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1>
                        </div>
                        <!-- Preview > coluna da esquerda -->
                        <div class="col-md-8">
                            <div class="program-preview--box contraste-box">
                                <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}">
                                    <div ng-if="pagePrograma.article.archived" class="img-mask--background">
                                        <div class="icon icon-programa-respondido">
                                            <div class="icon-circle">
                                                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="program-preview--box--content-wrapper">
                                    <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
                                        <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
                                    </div>
                                    <div class="program-preview--abstract color-theme-fg" ng-if="pagePrograma.article.archived === false">
                                        <h2>{{::stripHtml(pagePrograma.article.summary)}}</h2>
                                    </div>
                                    <div class="program-preview--abstract-details" ng-if="pagePrograma.article.archived === false">
                                        <div ng-bind-html="pagePrograma.article.summaryExtended"></div>
                                    </div>
                                    <div class="program-preview--share">
                                        <div ng-show="!pagePrograma.article.archived" class="program-preview--share-label">COMPARTILHE ESTE <b>PROGRAMA</b></div>
                                        <div ng-show="pagePrograma.article.archived" class="row text-right">
                                            <div class="col-xs-12">
                                                <a ui-sref="ranking({tema: pagePrograma.category.slug, programa: pagePrograma.article.slug})" class="btn btn-link">
                                                    <span>Ver Propostas</span>
                                                    <span class="glyphicon glyphicon-chevron-right color-theme-common-fg" aria-hidden="true"></span>
                                                </a>
                                            </div>
                                        </div>
                                        <div ng-show="pagePrograma.article.archived" class="program-preview--share-label">COMPARTILHE ESSA <b>RESPOSTA</b></div>
                                        <div class="dropdown">
                                            <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
                                            <social-share social-url="pagePrograma.$state.href('programa', {slug: pagePrograma.article.slug}, {absolute: true})" social-text="pagePrograma.article.title" social-image="pagePrograma.banner.src" arrow-class="social-share--arrow" class="dropdown-menu dropdown-menu-right"></social-share>
                                        </div>
                                    </div>
                                    <div class="program-preview--make-proposal" ng-if="pagePrograma.article.archived === false">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="button--themed">
                                                    <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Preview > coluna da direita -->
                        <div class="col-md-4 hidden-xs hidden-sm">
                            <div class="row" ng-if="!pagePrograma.article.archived">
                                <!-- Top Proposals -->
                                <div>
                                    <!-- Loading Top Proposals -->
                                    <div ng-if="pagePrograma.loadingTopProposals">
                                        <div class="alert alert-info" role="alert">
                                            Carregando propostas mais votadas...
                                        </div>
                                    </div>
                                    <!-- Top Proposals > Carousel -->
                                    <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
                                        <h3 class="color-theme-fg">Propostas mais votadas</h3>
                                        <proposal-carousel proposals="pagePrograma.proposalsTopRated" archived="pagePrograma.article.archived"></proposal-carousel>
                                    </div>
                                </div>
                                <!-- Proposal Box -->
                                <div>
                                    <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
                                        <h3 class="color-theme-fg">Apoie outras propostas</h3>
                                        <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" show-vote="true" focus="{{pagePrograma.search.proposal_id}}" do-vote="pagePrograma.vote(proposal_id, value)" archived="pagePrograma.article.archived"></proposal-box>
                                    </div>
                                    <!-- Loading Proposal Box -->
                                    <div ng-if="pagePrograma.loadingProposalBox">
                                        <div class="alert alert-info" role="alert">
                                            Carregando propostas nesse programa...
                                        </div>
                                    </div>
                                </div>
                                <!-- No Proposals? okay! -->
                                <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
                                    <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
                                        <h3>Programas sem propostas</h3>
                                        <p>
                                            Este programa ainda não possui nenhuma proposta.
                                            <div class="button--themed">
                                                <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
                                            </div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row" ng-if="pagePrograma.article.archived">
                                <!-- Archived buttons nav -->
                                <div class="col-sm-12">
                                    <div class="gov-response--link-list" ng-repeat="proposal in pagePrograma.proposalsTopRated">
                                        <div class="gov-response--link-item">
                                            <div class="button--themed">
                                                <button type="button" class="btn btn-block" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
                                                    <span style="font-weight:300;">Veja o que o governo respondeu</span>
                                                    <br/>
                                                    <span>{{:: ( $index + 1 ) }}ª proposta mais votada</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <section id="section-proposal-list" class="proposal-extended-section" style="display:none;" ng-if="pagePrograma.proposalsTopFive && pagePrograma.proposalsTopFive.length > 0">
            <div class="container">
                <div class="proposal-extended-section-header">
                    <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>
                    <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalsList()">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
                <div class="proposal-extended-section-content">
                    <proposal-list proposals="pagePrograma.proposalsTopFive" archived="pagePrograma.article.archived"></proposal-list>
                    <div class="row text-center">
                        <div class="col-xs-12">
                            <a ng-show="pagePrograma.total_proposals > 5" ui-sref="ranking({tema: pagePrograma.category.slug, programa: pagePrograma.article.slug})" class="btn btn-link">
                                <span>Veja todas as {{pagePrograma.total_proposals}} propostas</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-proposal-form" class="proposal-extended-section" style="display:none;">
            <div class="container">
                <div class="proposal-extended-section-header">
                    <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalForm()">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
                <div ng-if="!pagePrograma.$rootScope.currentUser">
                    <show-message type="'alert'" message="'Você não está logado!'" description="'Você precisa estar logado para enviar uma proposta.'"></show-message>
                    <div class="row">
                        <div class="col-sm-4"></div>
                        <div class="col-sm-8 text-center-sm">
                            <a ui-sref="entrar({redirect_uri: pagePrograma.sendProposalRedirectURI})">Clique aqui para ir para a página de login</a>
                        </div>
                    </div>
                </div>
                <div ng-if="pagePrograma.$rootScope.currentUser">
                    <div class="proposal-extended-section-content">
                        <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.SUCCESS">
                            <show-message type="'success'" message="'Proposta enviada com sucesso!'" description="'Sua proposta foi enviada para a nossa equipe de moderação. Em aproximadamente 72 horas você receberá em seu endereço de e-mail uma resposta sobre a sua proposta.'"></show-message>
                            <div class="row">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-8 text-center-sm">
                                    <button type="button" class="btn btn-link" ng-click="pagePrograma.sendAnotherProposal()">
                                        Clique aqui para enviar outra proposta
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.SENDING">
                            Enviando...
                        </div>
                        <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.ERROR">
                            <show-message type="'error'" message="'Erro ' + pagePrograma.error.code + '!'" description="pagePrograma.error.message"></show-message>
                            <div class="row">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-8 text-center-sm">
                                    <button type="button" class="btn btn-link" ng-click="pagePrograma.sendAnotherProposal()">
                                        Clique aqui para enviar outra proposta
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div ng-if="!pagePrograma.proposalStatus">
                            <cadastro-proposta program="pagePrograma.article" status="pagePrograma.proposalStatus"></cadastro-proposta>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-archived-banner" class="color-theme-bg" ng-if="pagePrograma.article.archived">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>
                            <div class="program-banner--icon" aria-hidden="true">
                                <div class="icon icon-respostas"></div>
                            </div>
                            <span class="archived-banner--title1">As propostas para este programa já foram</span>
                            <br/>
                            <span class="archived-banner--title2">respondidas pelo governo federal. Confira!</span>
                        </h2>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-response" ng-if="pagePrograma.article.archived">
            <div ng-if="!pagePrograma.proposalsTopRated">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="alert alert-info" role="alert">
                                Carregando propostas mais votadas...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="pagePrograma.proposalsTopRated">
                <div ng-repeat="proposal in pagePrograma.proposalsTopRated">
                    <div class="sub-section sub-section-{{::proposal.id}}" ng-class="{'sub-section-even': ( ($index+1) % 2 === 0), 'sub-section-odd': ( ($index+1) % 2 === 1)}">
                        <div class="container">
                            <div class="row">
                                <div class="col-xs-6 col-sm-4 col-md-3">
                                    <div class="img-mask--container" ng-style="{'background-image':'url( {{::proposal.body}} )'}">
                                        <div class="img-mask--background ng-scope">
                                            <div class="icon icon-programa-respondido">
                                                <div class="icon-circle">
                                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-8 col-md-9">
                                    <br>
                                    <h3 class="color-theme-fg">{{($index+1)}}ª proposta mais votada:</h3>
                                    <p>{{::proposal.abstract}}</p>
                                    <div class="hidden-xs">
                                        <div class="button--themed" style="margin: 10px 0;">
                                            <button class="btn btn-block btn-responsive" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
                                                Veja a resposta e o compromisso do governo
                                                <div class="button-left-icon">
                                                    <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
                                                </div>
                                            </button>
                                        </div>
                                        <br>
                                    </div>
                                </div>
                                <div class="col-xs-12 visible-xs">
                                    <div class="button--themed" style="margin: 10px 0;">
                                        <button class="btn btn-block btn-responsive" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
                                            Veja a resposta e o compromisso do governo
                                            <div class="button-left-icon">
                                                <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div ng-if="proposal.response" class="gov-response gov-response-{{::proposal.id}}" style="display:none;">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div ng-if="proposal.response.loading" class="alert alert-info" role="alert">Carregando a resposta e compromisso do governo.</div>
                                    <div ng-if="proposal.response.error" class="alert alert-warning" role="alert">Erro ao carregar a resposta e compromisso. Tente novamente ou <a ui-sref="duvidas">entre em contato</a>.</div>
                                    <div ng-if="proposal.response.content">
                                        <div class="gov-response--content">
                                            <div ng-bind-html="proposal.response.content"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <button class="btn btn-block btn-close-response pull-right color-theme-common-fg" ng-click="pagePrograma.toggleResponseVisibility(proposal)">
                                        FECHAR
                                        <div class="button-right-icon icon-circle icon-small icon-circle-close-response color-theme-common-bg pull-right">
                                            <span class="glyphicon glyphicon-remove icon-white" aria-hidden="true"></span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="response--context vertical-padding">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-5">
                                <div class="button--themed">
                                    <a class="btn btn-block" ui-sref="respostas">
                                        <span>Veja todas as propostas</span>
                                        <br/>
                                        <span>Respondidas pelo governo</span>
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-2"></div>
                            <div class="col-sm-5">
                                <div class="button--themed">
                                    <button type="button" class="btn btn-block" ng-click="pagePrograma.toggleContentVisibility()">
                                        <span>Saiba mais sobre o programa</span>
                                        <br/>
                                        <span>{{::pagePrograma.article.title}}</span>
                                        <span class="glyphicon glyphicon-chevron-right"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="section-content" ng-style="{ display: pagePrograma.article.archived ? 'none': 'block' }">
                <div ng-if="pagePrograma.article.archived">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 color-theme-fg">
                                <h3 style="font-weight: bold;">Sobre o programa:</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <article class="program-content" ng-if="pagePrograma.article" ng-class="pagePrograma.article.slug">
                    <div ng-bind-html="pagePrograma.article.bodyTrusted"></div>
                </article>
            </section>
        </div>
    </div>